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

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.

tDY3BFfOdlgXwosae Sr OGfB2dSfWEU92LFmb nr3WP BDnNdTC4IWxPAYRmjx4iug0CW3OE VB U0dXgm

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 Zoom Image on Hover Effects with CSS1

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)

Screenshot 1932

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 Zoom Image on Hover Effects with CSS2

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.

zpIw0GxMJAproO3fX2z QIqEbvfIOwvXpVqP a6K8G WnoHMX8D9v7iWedoTET3gakUPo8DxSQdMj21uUMydyYxrKoA7Fni cSJtJIkwDk 1MqKB4BRVlfTouy4OA9CTCMh92VB

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 Hover Effects with CSS3

Elementor CSS Zoom in Image on Hover (Sample 3) with Faster Transition

Over to the last section (04:50)

zIKGa0HVmpbu8eLpWMlZ4nYV g1Rl5aTfcln lopKfSDZAdjdQD5stt66k4JoT2suUmxdv7elCsLsuyIs3vp4h1jY5mhe ud4jifSoBICK4N7Y vwvpXX T LQI62KT44Sd qkp9

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
Elementor Zoom Image on Hover Effects with CSS4

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

  1. Can I change the hover style of my zoom image using CSS in Elementor?

    Yes, you can change the hover style of a zoom image using CSS in Elementor. Here’s how:
    -Edit the page in Elementor where the zoom image is located.
    -Select the zoom image you want to modify.
    -In the left-hand panel, go to the “Advanced” tab.
    -In the “Custom CSS” section, click on the “Edit” button.
    -Add the following code to change the hover style of the zoom image:

    selector img:hover {
    /* Add your hover styles here */
    }

    Note:
    Replace “selector” with the CSS selector for the element that contains the zoom image. For example, if the zoom image is inside a column with a class of “my-column-img”, the selector would be “.my-column-img”.

    -Save your changes and preview the page to see the updated hover style.

    Here’s an example of what the CSS code could look like:

    .my-column-img:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }

    This would make the zoom image enlarge by 20% and add a black box shadow when you hover over it.

  2. Can I customize the Elementor CSS zoom effect?

    Yes, you can customize the zoom effect by adjusting the CSS code. For example, you can change the duration of the transition or use a different transformation effect, such as a blur or shadow.

  3. Can I apply the zoom effect to other elements besides images?

    Yes, you can apply the zoom effect to other elements besides images by using the appropriate CSS selector and class name. For example, you can apply the effect to a text block or a button.

  4. How do I remove the CSS image zoom on hover effect in Elementor Pro?

    To remove the CSS image zoom on hover effect in Elementor Pro, you can follow these steps:

    -In Elementor Pro, select the image widget that has the hover effect you want to remove.
    -Click on the Edit button for the widget to open its settings.
    -In the Style tab, scroll down to the Hover Effects section.
    -Find the Zoom Out effect and click on the Remove button next to it.
    -Save your changes and preview the page to see the hover effect removed from your image.

    Alternatively, if you want to remove the hover effect with CSS instead of using the Elementor Pro settings, you can add a class to the image widget and apply the following CSS code to it:

    .your-class-name:hover {
    transform: none !important;
    }

    Make sure to replace “your-class-name” with the class name you used for the image widget. The !important rule is used to override any existing styles applied to the element, so the transform property is set to none, which removes the zoom effect.

  5. How do I enlarge an image on hover Elementor Pro?

    To enlarge an image on hover in Elementor Pro, you can use the following steps:

    1. Insert an “Image” widget into your Elementor Pro page.
    2. Upload the image you want to use or select an image from your media library.
    3. Click on the “Advanced” tab in the left sidebar.
    4. Under “Custom CSS”, add the following code:

    .elementor-image:hover img {
    transform: scale(1.1);
    transition: all 0.3s ease-out;
    }

    5. Click on the “Style” tab in the left sidebar.
    6. Under “Image”, set the “Width” and “Height” of the image to the desired size.
    7. Under “Image Border”, set the “Width” to 0px.
    8. Under “Hover Effects”, set the “Opacity” to 100% and “Color” to the desired color.

    With this, when the user hovers over the image, it will scale up by 10% and transition smoothly with the specified duration and easing. The hover effect will also add a color overlay to the image with the opacity set to 100%.

    You can adjust the values in the CSS and Style tabs to your liking to achieve the desired effect.

  6. How do I control the size of a hover on image with CSS in Elementor Pro?

    To control the size of a hover on an image with CSS in Elementor Pro;

    First, select the image widget that you want to add a hover effect to then go to the Advanced tab. In the Custom CSS section add the following CSS code to the editor:

    .elementor-image:hover img {
    transform: scale(1.1);
    }

    This code will increase the size of the image by 10% when the mouse hovers over it.
    You can adjust the scale value to increase or decrease the size of the hover effect. For example, a scale value of 1.2 will increase the size of the image by 20%.

    Note: If you want to control the size of the hover effect more precisely, you can use the width and height CSS properties instead of the transform property.
    For example:

    .elementor-image:hover img {
    width: 110%;
    height: 110%;
    }

    This code will increase the width and height of the image by 10% when the mouse hovers over it.

  7. Can you create an Elementor zoom background image on hover with CSS?

    Yes, follow these steps to create an Elementor zoom background image on hover with CSS:

    -Add the background image to your Elementor section or widget.
    -Add a CSS class to the section or widget. For example, you can name the class “zoom-bg”.
    -In the Custom CSS section of your Elementor section or widget, add the following CSS code:

    .zoom-bg {
    transition: transform 0.3s;
    transform-origin: center center;
    }
    .zoom-bg:hover {
    transform: scale(1.1);
    }

    This code adds a transition effect to the transform property and sets the transform-origin to the center of the section or widget. On hover, the transform property is changed to a scale of 1.1, which zooms in the background image by 10%.

    You can adjust the transition duration and scale factor to your liking by modifying the values in the CSS code.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

3 thoughts on “Zoom Image on Hover Effect with CSS in Elementor [PRO]”

    1. Hey Gaelle,
      To bring a zoomed image to the front on hover, you can use the z-index property in CSS.
      Here is an example of how you can use the z-index property to bring a zoomed image to the front on hover:

      .zoomed-image {
      position: relative;
      z-index: 0;
      }

      .zoomed-image:hover {
      z-index: 1;
      }

      The z-index of the .zoomed-image element is set to 0 by default, and on hover, the z-index is increased to 1. This will cause the image to appear on top of any other elements with a lower z-index value.

      I hope this answers your question.

  1. very useful blog. thanks for it. but can you tell me the code for each image hover that will zoom in center of the section while hovering on that image. let’s say, there are three column with an image. each image will zoom while hover on there. but we want the left and right side image zoom in center while hovering.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

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