CSS doesn’t have a pseudoclass for targeting click events, and this constitutes one of the biggest pain points of front-end developers. The closest pseudo-class is :active which styles an element for the period of time a user presses their mouse over it.
Before I proceed, I do want to say, that for image zoom I recommend the CSS-only method (which changes the dimensions of the image), only when you want a single or a group of few images to have the zoom feature.
Front-End Techniques We’ll Use
Now that you’ve been cautioned, let’s quickly look over the 3 key techniques we’ll be using:
The <map> HTML tag that allows browsers to create linkable areas over an image. Read more on the <map> element in my earlier post.
The usemap attribute of the <img> tag, that hooks up the image to the image map.
The :target CSS pseudo-class that represents an element that has been targeted using its ID selector.
1. Create the HTML Base
First, let’s create the HTML base. In the code below, we add an image to be zoomed and expanded & close button icons for zooming in and out.
On the image map, the clickable area should be at the top-right corner of the image right below the Expand icon, and about its size. Place the <map> element before the first <img> tag in the HTML. We’ll bind the image to the map in the next step.
In the code block above, the <area> tag defines the shape, size, and URI of a linkable area inside an image map. For a rectangular shape, the shape attribute takes the rect value, and the four values of the coords attribute represent the distance in pixels between:
the left edge of the image & the left edge of the link area
the top edge of the image & the top edge of the link area
the left edge of the image & the right edge of the link area
the top edge of the image & the bottom edge of the link area
The value of the href attribute has to be the hash identifier of the image (this is why the image should have an id).
4. Bind the image to the Image Map
Add the usemap attribute to the image so as to bind it to the image map. Its value needs to be the hash representation of the name attribute of the <map> tag we added in Step 3.
The clickable area of the image map now lies behind the Expand button. When the user clicks the Expand button, it’s the clickable area that is clicked in reality — remember that we made the Expand button “passable” with the pointer-events: none; rule in Step 2.
This way the user targets the image itself by clicking it, and after the click the URI gets suffixed with the "#img1"fragment identifier.
5. Style the :target Pseudo-Class
Until the "#img1" fragment identifier is at the end of URI, the targetted image can be styled with the :target pseudo-class
The dimensions of the targeted image increase, the Close button gets shown, and the Expand button gets hidden.
As the Close button was added as a background image (Step 2), and is actually an <a> tag with the href=# attribute (Step 1), when it’s clicked, it removes the fragment identifier from the end of the URI. Therefore it also removes the :target pseudo-class from the image, and the image goes back to its previous size.
Now the CSS-only zoom-on-click effect is done, check out the demo below, or read a little bit more on the theory behind image maps in the next section.
By now, you certainly understand that the most important thing for this CSS-only solution to work is to target the image using the href="#imgid" attribute, which could also be done using the <a> tag instead of the image map.
This may be true, however when it comes to images, using the <map> element is more appropriate. It’s even more important that when you want the zoom to happen on clicking on a larger area on the image rather than just on the Expand icon, <map> gives you an easy solution.
The default value for shape attribute creates a rectangular linkable area that covers the whole image. If you were to use <a> instead, you would have to code it to cover the image, and you may also have to use a wrapper element for the same purpose.
To also speak about the caveats of this solution, the pointer-events CSS property (we used in Step 2) is supported by Internet Explorer only from version 11.
To support IE browsers before that, you may want to either use <a> instead of <map>, or have the image zoomed on by clicking anywhere on it (in this case there’ll be no need for the Expand icon).