How to Create Pure CSS onClick Image Zoom Effect

CSS doesn’t have a pseudoclass for targeting click events, and this constitutes one of a biggest pain points of front-end developers. The closest pseudo-class is :active that styles an component for a duration of time a user presses their rodent over it.

The Definitive Guide to CSS Pseudo-Classes

 

The Definitive Guide to CSS Pseudo-Classes

Whether we are a beginner or an gifted CSS developer, we substantially have listened of pseudo-classes. The most…Read more

This outcome is however short-lived: once a user releases a mouse, :active doesn’t work any more. We need to find some other approach to emulate a click eventuality in CSS.

This post has been created in response to a reader’s request, and it’s going to explain how to target a click eventuality with pristine CSS in a specific use case, image zoom.

You can see a final outcome subsequent — a CSS-only resolution for image wizz on click.

 

When to Use a CSS-Only Solution

Before we proceed, we do wish to say, that for picture wizz we suggest a CSS-only process (which changes a measure of a image), usually when we wish a single or a group of few images to have a wizz feature.

For a proper gallery, JavaScript provides some-more coherence and efficiency.

Front-End Techniques We’ll Use

Now that you’ve been cautioned, let’s fast demeanour over a 3 pivotal techniques we’ll be using:

  1. The map HTML tag that allows browsers to create linkable areas over an image. Read some-more on a map component in my earlier post.
  2. The usemap charge of a img tag, that hooks adult a picture to a picture map.
  3. The :target CSS pseudo-class that represents an component that has been targeted regulating a ID selector.
1. Create a HTML Base

First, let’s emanate a HTML base. In a formula below, we supplement an picture to be zoomed and expanded close symbol icons for zooming in and out.

img id="img1" class="img" src="http://bit.ly/2acrH5J" /
a href="#" class="close"/a
img class="expand" src="Expand-icon.png" /

It’s critical to have an ID on a picture to be zoomed, and a Close symbol needs to be a couple that has a href="#" attribute, I’ll explain because after in a post.

2. Add a CSS

Initially, a Close idol shouldn’t be displayed. The position, margin-, left, and bottom properties place the Expand and Close icons where we wish them to be — during a top-right dilemma of a image.

The pointer-events: none; order allows rodent events to pass by a Expand icon and reach a image.

.img {
  height: 150px;
  width: 200px;
}
.close {
  background-image: url("Close-icon.png");
  background-repeat: no-repeat;
  bottom: 418px;
  display: none;
  height: 32px;
  left: 462px;
  margin-top: -32px;
  position: relative;
  width: 32px;
}
.expand {
  bottom: 125px;
  margin-left: -32px;
  margin-right: 16px;
  pointer-events: none;
  position: relative;
}
Image with Expand Button
Initial state with manifest Expand and dark Close icons
3. Add a Image Map

On a picture map, a clickable area should be at a top-right corner of a picture right subsequent a Expand icon, and about a size. Place a map component before a initial img tab in a HTML. We’ll connect a picture to a map in a subsequent step.

map name="m1"
  area shape="rect" coords="170 5 195 30" href="#img1"
/map

In a formula retard above, a area tab defines a shape, size, and URI of a linkable area inside an picture map. For a rectangular shape, a shape charge takes a rect value, and a four values of a coords charge paint a stretch in pixels between:

  1. the left corner of a picture a left corner of a couple area
  2. the tip corner of a picture a tip corner of a couple area
  3. the left corner of a picture a right corner of a couple area
  4. the tip corner of a picture a bottom corner of a couple area

The value of a href charge has to be a hash identifier of a image (this is because a picture should have an id).

4. Bind a picture to a Image Map

Add a usemap charge to a picture so as to bind it to a picture map. Its value needs to be a hash illustration of a name charge of a map tag we combined in Step 3.

img id="img1" class="img" usemap="#m1"
    src="http://bit.ly/2acrH5J" /

The clickable area of a picture map now lies behind a Expand button. When a user clicks a Expand button, it’s a clickable area that is clicked in existence — remember that we finished a Expand symbol “passable” with a pointer-events: none; order in Step 2.

This approach a user targets a picture itself by clicking it, and after a click a URI gets suffixed with a "#img1" fragment identifier.

5. Style a :target Pseudo-Class

Until a "#img1" bit identifier is during a finish of URI, a targetted picture can be styled with a :target pseudo-class

The measure of a targeted picture increase, a Close symbol gets shown, and a Expand symbol gets hidden.

.img:target {
    height: 450px;
    width: 500px;
}
.img:target+.close {
    display: block;
}
.img:target+.close+.expand {
    display: none;
}
Zoomed Image with Visible Close Button
Zoomed Image with Visible Close button
How a Close Button Works

As a Close symbol was combined as a credentials picture (Step 2), and is indeed an a tab with a href=# charge (Step 1), when it’s clicked, it removes a bit identifier from a finish of a URI. Therefore it also removes a :target pseudo-class from a image, and a picture goes behind to a prior size.

Now a CSS-only zoom-on-click outcome is done, check out a demo below, or review a small bit some-more on a speculation behind picture maps in a subsequent section.

 

Background Info: Why map and not a?

By now, we positively know that a many critical thing for this CSS-only resolution to work is to target a picture regulating a href="#imgid" attribute, that could also be finished regulating a a tab instead of a picture map.

This might be true, however when it comes to images, regulating a map component is some-more appropriate. It’s even some-more critical that when we wish a wizz to happen on clicking on a incomparable area on a image rather than only on a Expand icon, map gives we an easy solution.

map name="m1"area shape="default" href="#img1"/map

The default value for shape charge creates a rectangular linkable area that covers a whole image. If we were to use a instead, we would have to formula it to cover a image, and we might also have to use a coupling component for a same purpose.

To also pronounce about a caveats of this solution, a pointer-events CSS skill (we used in Step 2) is upheld by Internet Explorer only from chronicle 11.

To support IE browsers before that, we might wish to possibly use a instead of map, or have a picture zoomed on by clicking anywhere on it (in this box there’ll be no need for a Expand icon).

Add Comment