Unit 2 CSS Stylesheet Question

CS Discoveries
2

Yes, that’s possible, but the trick is to wrap the image and the caption inside another container called “figure”

This is beyond the scope of what is taught in unit 2, however, since you asked, I will share an example of how I do this in a slightly more advanced class.

Below is the html code for one single image.

<figure class = "projects">
    <img src="gallery3.jpg" alt="picture of Italy">
    <figcaption><span>Italian Countryside</span> You can't beat the beauty of the Italian Countryside.</figcaption>
</figure>

Then, in the stylesheet, you float the “figure” to the left (instead of the image) and everything inside the figure container goes with it.

Here’s a link to a site with 5 images coded like the one above.

Image Gallery Example

This is the stylesheet code that styles the html in my example:

/* -- This is where the figure containers and the images are styled --*/

figure.projects {
  float:left;
  padding-top: 2px;
  border: solid 1px black;
  text-align:center;
  height: 270px;
  width: 260px;
  margin: 1rem;
  background: white;
}

figure.projects figcaption {
  font-size: .75rem;
}

figure.projects figcaption span {
  display: block;
  font-weight:bold;
  font-size: .9rem;
  color: red;
}

Hope this helps!

Mike