CSS Grid overlay

In this sample, we demonstrate how you can create an overlay using the CSS Grid. Using CSS Grid enables you to create overlapping layout without complicated pixel calculation.

Code

/*CSS*/
.template
{
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    width: 172px;
    height: 172px;

}

.overlay
{
    -ms-grid-row-align: end;
    background-color: rgba(0,0,0,0.65);
    height: 60px;
    overflow: hidden;
    padding: 0px 12px 0px 12px;
}

.overlay .overlayItemTitle
{
    font-family: Segoe UI Semilight, Segoe UI;
    font-size: 20pt;
    color: white;
    overflow: hidden;
    white-space: nowrap;
}


.overlay .overlayItemText
{
    font-family: Segoe UI;
    font-size: 11pt;
    color: white;
    overflow: hidden;
    white-space: nowrap;
}

<!--Markup-->

<div class="template">
    <img class="image" src="images\image1.jpg">
    <div class="overlay">
        <div class="overlayItemTitle">Lorem ipsum</div>
        <div class="overlayItemText">Sit amet dolor lorem ipseum</div>
    </div>
</div>