Tips to Make Pure CSS onClick Image Zoom Effect

Image with expand Button

Hello friends today we gonna learn about Tips to Make Pure CSS onClick Image Zoom Effect. So read this article, Tips to Make Pure CSS onClick Image Zoom Effect step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: Tips to Make Pure CSS onClick Image Zoom Effect

CSS has no pseudoclass for it targeting click events, and this is one of the biggest pain points from front-end developers. The closest pseudo-class is: active which formats an element during the time a user hovers over it with the mouse.

However, this effect is short-lived: as soon as the user releases the mouse,: active no longer works. We have to find another way to emulate the click event in CSS

This post was written in response to a reader’s request, and it will explain it how to target the click event with pure CSS in a specific use, image zoom

You can see the … final result below – a CSS solution for this image zoom on click

See the Pen Image Zoom (Pure CSS) from Preethi (@rpsthecoder) on CodePen.

back to menu ↑

When should you use the CSS solution?

Before going any further, let me say that for zooming images, I recommend the CSS-only method (which changes the image’s dimensions), only if you have a single or a group of single images to have the hem feature

For a good gallery, JavaScript offers more flexibility and efficiency.

back to menu ↑

Front-end techniques we’ll be using

Now that you’ve been warned, let’s get it right 3 important techniques we will use:

  1. The
    HTML tag that browsers can use create linkable areas over an imageRead more about it

    element in my earlier post.
  2. The usemap attribute of the tag, that hooks up the image to the image folder.
  3. The target CSS pseudo class representing an element targeted using the ID selector.
1. Create the HTML base

Let’s create the HTML base first. In the code below we add an image to zoom in and enlarge close to button icons for zooming in and out.

It is important to have an ID on the image to be zoomed in and the Close option button must be a link that has the href = ”https://www.hongkiat.com/blog/css-image-zoom-onclick/#” attribute, I’ll explain why later in the post.

2. Add the CSS

Initially the Close icon should not be displayedThe position, margin, left, and bottom properties place the Expand and close icons where we want them – in the top right corner of the image.

The pointer events: none; rule allows mouse events go through the Expand icon and reach the 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; }

Initial state with visible expand and hidden close icons

3. Add the Image Map

On the image folder, the clickable area should be in the upper right corner of the image directly below the Expand icon and over the size. Post it

element before the first tag in the HTML. We will tie the image to the card in the next step.

In the above block of code defines the tag

the shape, size and URI of a linkable area within an image map. For a rectangular shape, the shape attribute gets the rect value and the four values of the coordinate attribute represent the distance in pixels between:

  1. the left edge of the image and the left edge of the link area
  2. the top edge of the image and the top edge of the link area
  3. the left edge of the image and the right edge of the left area
  4. the top edge of the image and the bottom edge of the link area

The value of the href attribute must be the hash ID of the image (this is why the image must have an id).

4. Bind the image to the Image Map

Add the usemap attribute to the image as bind it to the image folderIts value must be the hash representation of the name attribute of the

tag we added in step 3.

The clickable area of ​​the image map now lies behind the Expand buttonWhen the user clicks Expand button, it’s the clickable area that is actually clicked – remember we made it expanded button “Fair” with the pointer events: none; line in step 2.

In this way the user can focuses on the image itself by clicking on it, and after the click, the URI will be suffixed with “https://www.hongkiat.com/blog/css-image-zoom-onclick/#img1” snippet ID.

5. Style de: target Pseudo-Class

Until the “https://www.hongkiat.com/blog/css-image-zoom-onclick/#img1” snippet ID is at the end of the URI, the targeted image can be stylized with the :target pseudo class

The size of the target image increases, the Close button is displayed, and the Expand button is hidden.

.img: target {height: 450px; width: 500px;}. img: target + .close {display: block;}. img: target + .close + .expand {display: none;}

Zoomed image with visible close ButtonZoomed image with visible close button

How the Close Button To work

Like the Close button has been added as a background image (step 2), and is actually a tag with the href = # attribute (step 1). When clicked, the fragment ID will be removed from the end of the URI. That’s why removes the: target pseudo-class of the image and the image returns to the previous size

Now that the CSS-only zoom-on-click effect is complete, check out the demo below or read a little more about the theory behind image maps in the next section.

See the Pen Image Zoom (Pure CSS) from Preethi (@rpsthecoder) on CodePen.

Background information: why

and not
?

By now you definitely understand that the most important thing for this CSS solution is to work target the image with the href = “https://www.hongkiat.com/blog/css-image-zoom-onclick/#imgid” attribute, which can also be done with the tag instead of the image directory.

This may be true, but when it comes to images, the use of it is

element more suitable. It is even more important when you want to zoom in done by clicking on a larger area on the image instead of just clicking the expand icon,

you a simple solution.

The default value for the shape attribute creates a rectangular linkable area that covers the entire imageIf you instead you should encode it to cover the image, and you may also need to use a wrapper element for the same purpose.

Also to speak of the caveats of this solution: the pointer-events CSS property (which we used in step 2) is supported by Internet Explorer only from version 11

To support IE browsers earlier, you may want instead of

or zoom the image by clicking anywhere (in this case, the Expand icon is not needed).

back to menu ↑

Tips to Make Pure CSS onClick Image Zoom Effect: benefits

  • The Tips to Make Pure CSS onClick Image Zoom Effect tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the Tips to Make Pure CSS onClick Image Zoom Effect guide is free.

back to menu ↑

Faq

Tutorial summary of Tips to Make Pure CSS onClick Image Zoom Effect

In this guide, we told you about the Tips to Make Pure CSS onClick Image Zoom Effect; please read all steps so that you understand Tips to Make Pure CSS onClick Image Zoom Effect in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the Tips to Make Pure CSS onClick Image Zoom Effect, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the Tips to Make Pure CSS onClick Image Zoom Effect tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide Tips to Make Pure CSS onClick Image Zoom Effect. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the Tips to Make Pure CSS onClick Image Zoom Effect, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “Tips to Make Pure CSS onClick Image Zoom Effect”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide Tips to Make Pure CSS onClick Image Zoom Effect, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart