This Week I Learned: Magnify on Click [2023–05–26]

Photo by Markus Winkler on Unsplash

Neat little trick: allow your web app’s users to passively notice that they can zoom in on a picture by clicking, with no instructions.

.magnify {
    cursor: zoom-in; /* magnifying glass with a + */
    transition: transform .25s; /* don't snap */
}

.magnify:active {
    cursor: zoom-out; /* magnifying glass with a - */
    transform: scale(2); /* a lot larger */
}

You might also want to highlight the temporarily enlarged image by giving it an opaque background and perhaps a border or box-shadow in the .magnify:active rule.