Click to zoom images with CSS

A small trick to let folks zoom into images by clicking on them, using a CSS checkbox toggle. Optionally, a bit of JavaScript can handle the zoom origin so it follows the cursor.

The HTML structure:

<div class="click-zoom">
  <label>
    <input type="checkbox">
    <img src="image.jpg" alt="Yeah, fill these in!">
  </label>
</div>

The CSS:

.click-zoom input[type=checkbox] { display: none; }
.click-zoom label { display: block; line-height: 0; }
.click-zoom label img {
    transition: transform 0.25s ease;
    cursor: zoom-in;
}

.click-zoom input[type=checkbox]:checked ~ img {
    transform: scale(2.5);
    cursor: zoom-out;
}

The JS is optional if you don't need to follow the cursor:

document.querySelectorAll('.click-zoom img').forEach(function (img) {
    img.addEventListener('mousemove', function (e) {
        var r = img.getBoundingClientRect();
        img.style.transformOrigin =
            ((e.clientX - r.left) / r.width * 100).toFixed(1) + '% ' +
            ((e.clientY - r.top) / r.height * 100).toFixed(1) + '%';
    });
});

Here is an example (click to zoom in):

View of the sea from the coast near Erquy