Are you looking to add some eye-catching visual effects to your Elementor website?

One way to do this is by adding a zoom image on hover effect with CSS.

This technique allows you to make your images stand out and draw attention to them when a user hovers their mouse over them.

Here’s a tutorial on how you can make your images zoom when you hover over them.

You can apply an Elementor image zoom on hover on the 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 whatsoever! Elementor Pro will enable you to add Custom CSS which you’ll use to achieve the zoom effect.

So let’s get started!

Video: Elementor Zoom Image on Hover with CSS

Adding a Zoom Image on Hover Effect to Images Using CSS in Elementor Pro

On this page, I have a 2 column section layout with two images that I’m going to use for this demo. (00:53). I will be adding a custom CSS to create a hover effect on my images.

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 Zoom Image CSS snippet to use here:

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

(01:32)

In this image zoom CSS code; the first selector, “.image”, selects the element with the class “image” and applies two styles to it:

• cursor: zoom-in; sets the cursor property to “zoom-in”, which changes the cursor shape to a magnifying glass when the user hovers over the element.
• transition: .5s; sets a transition effect that will animate any changes in the element’s properties over a duration of 0.5 seconds.

The second selector, “.image: hover”, applies styles to the same element when the user hovers over it.

• cursor: zoom-in; sets the cursor property to “zoom-in”, which changes the cursor shape to a magnifying glass when the user hovers over the element.
• transition: .5s; sets a transition effect that will animate any changes in the element’s properties over a duration of 0.5 seconds.

• transform: scale(1.2); scales the element by a factor of 1.2, making it 20% larger. This creates a zoom effect that enhances the image or content when the user hovers over it.
  

This 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 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 CSS Zoom in Background Image on Hover (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.

Elementor CSS Zoom Image on Hover (Sample 3) with Proportional Zoom-in Scale

Moving on to the next section (04:03), we are going to add a zoom effect to our image on hover but with a proportional zoom in scale, which is 1.1.1.1.

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 CSS Zoom in Image on Hover (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
  

With these simple steps, you can create a beautiful and dynamic Zoom Image on Hover Effect that will add an extra layer of professionalism and creativity to your website. With the power of CSS in Elementor Pro, you can create a smooth and stylish animation that will attract your audience’s attention and keep them engaged with the content on your website without needing any coding skills. I hope this has been a useful tutorial for you.

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.

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.

Elementor Image Zoom on Hover FAQ