Get My Free WordPress Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design  journey. Intermediate and advanced WordPress users have found it helpful too.

Zoom Image on Hover Effect with CSS in Elementor [PRO]

Zoom-image-on-however-elementor

Here’s a tutorial on how you can make your images zoom when you hover over them. You can apply this zoom image on hover effect on selected images you want. I’ll also show you how to use the transition and transform on hover.

All you need for this is Elementor Pro, no other extra plugin. Elementor Pro is what will enable you to add Custom CSS which you’ll use to achieve the zoom effect.

Video

Adding a Zoom Image on Hover Effect to Images

I have a 2 column section layout here with two images that I’m going to use for this demo. (00:53)

Let’s start off by selecting the first image; on the Edit Image area on the left, go to Advanced, then down to the Custom CSS option. Here, you need to add a custom css code for the hover effects.

You can get the CSS snippet to use here:

selector.image {
  cursor: zoom-in;
  transition: .5s;
}
selector.image:hover {
  transform: scale(1.2);
}

(01:32)

This code has a selector for the image with class .image, cursor is zoom in and transition .5 seconds, and for this same class, the zoom will only take effect on image hover.

Select and copy the class, that’s “.image”, go to Advanced and paste it under CSS Classes, but remove the *dot*.

Now you’ll notice that the zoom image on hover is active on the first image. 

Do the same for the second image; select select image, go to Advanced and paste the CSS snippet, copy the .image class and paste it in CSS Classes (without the dot).

Update and preview. Now both images zoom in on hover.

Elementor Zoom Image on However (Sample 2)

In the next section, you need to select the images where to apply the zoom in effect. Here I’ll be applying it to the first image, the third image and the last image. (02:52)

To Read: How to Display Elementor Slider from Templates

So select the first image; in this first image, a Spacer widget was used to display a background image. When you go to Background under Advanced you’ll notice that the image is in the background. So the custom css will be applied to the spacer widget that’s holding the image.

To do this just go to Custom CSS still under Advanced and paste that CSS snippet. You’re also going to be using the same class as the previous images, that’s “.image” so copy it, go to Advanced and paste it under CSS Classes. 

Do the same for the third and last images, but remember to remove the dot at the beginning of the class.

Moving on to the next section (04:03)

Select the image and go to Advanced, under Custom CSS paste the code snippet. But here the transform scale should be “1.1.1.1”, to increase the zoom-in scale proportionally. 

selector.image-zoom {
  cursor: zoom-in;
  transition: .5s;
}
selector.image-zoom:hover {
  transform: scale(1.1,1.1);
}

For this image use the class “image-zoom” in CSS Classes.

Elementor Zoom Image on However (Sample 3) with Faster Transition

Over to the last section (04:50)

Here the zoom image on hover effect transition is a bit different from the other images. To achieve this kind of transition:

Go to your editor, select the first image and paste the code snippet under Custom CSS in Advanced. Under CSS Classes add the class “image-zoom”.

But here you need to change the transition; instead of .5s change it to .1s. This will make the transition faster than in the other images.

selector.image-zoom {
  cursor: zoom-in;
  transition: .1s;
}
selector.image-zoom:hover {
  transform: scale(1.2);
}

Do the same for the next 2 images: 

  • Select the image and go to Advanced 
  • Under Custom CSS paste css snippet, in the snippet change transition to 1s instead of 5s.
  • Add the class “image-zoom” under CSS Classes

That’s how you easily achieve a zoom-in on hover effect on images on your site, as well as make the zoom-in transitions faster or slower if you want. Hope this has been a useful tutorial for you.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

For any comments or questions let me know in the section below. And please subscribe to the youtube channel and to my newsletter for more tips, tricks and tutorials.

Also Read. . .

Leave a Comment

Your email address will not be published.

Reccomended Tools

Get Web Hosting from the best as recommended by WordPress.org

Elementor is the WordPress most popular page builder with over 10 million active users

Featured In

Wordcamp_Logo
OneYoungWorld_white
New York Mag

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running

© 2022 GO Tech UG