<div id="wrapper">
<h1>The Title</h1>
<div class="pics">
<figure>
<img src="http://placehold.it/250x200" alt="picture" width="250" height="200">
<figcaption>COBBLER'S COVE</figcaption>
</figure>
<figure>
<img src="http://placehold.it/250x200" alt="picture" width="250" height="200">
<figcaption>COBBLER'S COVE</figcaption>
</figure>
<figure>
<img src="http://placehold.it/250x200" alt="picture" width="250" height="200">
<figcaption>COBBLER'S COVE</figcaption>
</figure>
<figure>
<img src="http://placehold.it/250x200" alt="picture" width="250" height="200">
<figcaption>COBBLER'S COVE</figcaption>
</figure>
</div>
</div>
html {
background: #336;
}
#wrapper {
background: #fff;
margin: 1em auto;
max-width: 900px;
width: 70%;
}
.pics figure {
display: inline-block;
width: 30%;
margin: 1%;
position: relative; /* Needed for Pos: Abs to work on the caption */
}
.pics figure img {
max-width: 100%;
height: auto;
display: block;
}
.pics figure figcaption {
position: absolute;
bottom: 0;
display: block;
width: 100%;
max-width: 250px;
box-sizing: border-box;
background: #39f;
background: rgba(50,150,255,0.7);
color: #fff;
text-align: center;
padding: 0.2em;
font-family: sans-serif;
font-weight: bold;
font-size: 1.2em; /* Fallback font size where vw fails */
font-size: 2vw;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.