See the Pen Image Zoom (Pure CSS) by Preethi on CodePen. Read Also: The Definitive Guide to CSS Pseudo-Classes You can see the final result below - a CSS-only solution for image zoom on click. This post has been written in response to a reader’s request, and it’s going to explain how to target the click event with pure CSS in a specific use case, image zoom.
We need to find some other way to emulate the click event in CSS. This effect is however short-lived: once the user releases the mouse, :active doesn’t work any more. The closest pseudo-class is :active which styles an element for the period of time a user presses their mouse over it. CSS doesn’t have a pseudoclass for targeting click events, and this constitutes one of the biggest pain points of front-end developers.
