O(sin(x)) - CSS-only image expansion on click

Jul 24 2024
10:54 AM

Completely JS free. Demo:

Styling is surprisingly simple. Just add a tabindex="0" attribute to the element, and then animate its :focus property in CSS:

<img class="expand" tabindex="0" src="..." />

img.expand {
    transition: transform 0.25s ease;
}

img.expand:focus {
    -webkit-transform: scale(2);
    transform: scale(2);
}