<h1>Image Ratio Comparator</h1>
<div id ="app" class="container">Loading...</div>
<p>☝️<br/>Mouse over the boxes to highlight them.</p>
body {
  color: #2d2a33;
  background: #ECEAF2;
  text-align: center;
}
h1 { font-size: 1.5em; margin-bottom: .25em; }
p { text-align: center; margin: 0; }
.container {
  position: relative;
  margin: 0 2em .5em;
}
.box {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    border: 1px solid;
    background: rgb(45 42 51 / 10%);
    z-index:0;
    border-radius: .25em;
    overflow: hidden;
}
.box:hover { z-index: 1; background: rgba(255,80,103,.6); opacity: 1; }
.box::before {
    display: block;
    position: absolute;
    right: 0; top: -1.5em;
    transform-origin: 100% 100%;
    transform: rotate(-90deg);
    content:attr(title);
    background: #fff;
    padding: .25em 1em;
    font-size: .5em;
    line-height: 1em;
    border-radius: .25em;
    opacity: .2;
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
    text-align: right;
    max-width: 300px;
}
.box:hover::before,
.box:last-child::before { opacity: 1; }
sizes = [
{"name":"Profile", "width": 378, "height": 430, "ratio": 0.88 },
{"name":"Teaser", "width": 240, "height": 240, "ratio": 1 },
{"name":"Card Image", "width": 388, "height": 344, "ratio": 1.13 },
{"name":"Featured Teaser", "width": 690, "height": 415, "ratio": 1.66 },
{"name":"Gallery", "width": 853, "height": 480, "ratio": 1.78 },
{"name":"Featured XL", "width": 2000, "height": 840, "ratio": 2.38 },
];

const $app = document.getElementById("app");
const baseValue = 30;
const unit = "vw";

// set app to baseValue height
$app.style = "height:" + baseValue + unit;
$app.innerHTML = "";

function addElementToApp(ratio, title) {
    const newDiv = document.createElement("div");

    newDiv.classList.add("box");
    newDiv.title = title;
    newDiv.style = "width:" + ratio * baseValue + unit;

    // add the newly created element and its content into the DOM
    $app.appendChild(newDiv);
}

sizes.reverse().forEach(e=>{
    addElementToApp(e.ratio, e.name);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.