Stacking Elements With Grid

This uses display: grid to stack text on an image while keeping the image aspect ratio.

by khamer

HTML

<div class="stack">
    <div class="foo">
        <img src="https://picsum.photos/1512/785">
    </div>
    <div class="bar">
        <h2>Lorem ipsum dolor.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, adipisci?</p>
    </div>
</div>

SCSS

.stack {
    display: grid;

    .foo, .bar {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 1;
        grid-row: 1;
    }

    img {
        max-width: 100%;
    }

    .bar {
        background-color: rgba(0,0,0,.25);
        color: white;
        padding: 1rem;
    }
}