<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;
            }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.