<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);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.