CSS Grid overlay

In this sample, we demonstrate how you can dynamically grow the size of your image and the overlay using the CSS Grid. Since you do not need to do pixel calculation, you can easily grow and shrink the image.

Code

/* CSS */
/* CSS for Small Overlay */
.templateSmall
{
    width: 132px;
    height: 132px;
}

.overlaySmall
{
    height: 32px;
    overflow: hidden;
    padding: 4px 12px 4px 12px;
}

/* CSS for Large Overlay */
.templateLarge
{
    width: 272px;
    height: 272px;

}
.overlayLarge
{
    height: 100px;
    overflow: hidden;
    padding: 0px 12px 0px 12px;
}

.overlayLarge  .overlayItemText
{
    white-space: normal;
}

 /* JavaScript */
function scenario2Small() {
    var template = document.getElementById("scenario2Template");
    template.className = "template templateSmall";
    var overlay = document.getElementById("scenario2Overlay");
    overlay.className = "overlay overlaySmall";
    var overlayTitle = document.getElementById("scenario2OverlayTitle");
    overlayTitle.style.display = 'none';
    var overlayText = document.getElementById("scenario2OverlayText");
    overlayText.innerHTML="Lorem ipsum";
}

function scenario2Original() {
    var template = document.getElementById("scenario2Template");
    template.className = "template";
    var overlay = document.getElementById("scenario2Overlay");
    overlay.className = "overlay";
    var overlayTitle = document.getElementById("scenario2OverlayTitle");
    overlayTitle.style.display = 'block';
    overlayTitle.innerHTML="Lorem ipsum";
    var overlayText = document.getElementById("scenario2OverlayText");
    overlayText.innerHTML = "Sit amet dolor lorem ipseum";
}

function scenario2Large() {
    var template = document.getElementById("scenario2Template");
    template.className = "template templateLarge";
    var overlay = document.getElementById("scenario2Overlay");
    overlay.className = "overlay overlayLarge";
    var overlayTitle = document.getElementById("scenario2OverlayTitle");
    overlayTitle.style.display = 'block';
    overlayTitle.innerHTML="Lorem ipsum";
    var overlayText = document.getElementById("scenario2OverlayText");
    overlayText.innerHTML = "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua";
}

Small Original Large