JSFiddle - React, Tailwind, and code Playground

by ackernaut

HTML

<div>
    <img src="http://placekitten.com/120/80">
    <img src="http://placekitten.com/120/80">
    <img src="http://placekitten.com/120/80">
    <img src="http://placekitten.com/120/80">
    <img src="http://placekitten.com/120/80">
    <img src="http://placekitten.com/120/80">
    <img src="http://placekitten.com/120/80">
    <img src="http://placekitten.com/120/80">
</div>

CSS

div {
    margin: 20px;
    width: 400px;
}
img {
    display: block;
    float: left;
    position: relative;
    z-index: 1;
}
img:hover {
    height: 96px; /* 80px + 16px */
    left: 12px; /* 24px / 2 */
    margin-left: -24px;
    margin-top: -16px;
    top: 8px; /* 16px / 2 */
    width: 144px; /* 120px + 24px */
    z-index: 2;
    /* 24px x 16px is 6/4 ratio increase for 120px x 80px */
}