Elementor Zoom Image Quickly & Easily

Table of Contents

In this article we will learn how to zoom an article. Follow the steps to successfully zoom an article in Elementor. There are two methods of doing this:

  • Image zoom with overflow
  • Image zoom without overflow.

Method 1: Elementor Image zoom with overflow

Open Edit Image properties

Go to the Edit Image toolbox for the image element and open the Advanced tab. In the Advanced tab change the CSS class to "image-card".

Elementor Zoom Image

Now open the Custom CSS tab below and add the below CSS code to it.

Elementor Zoom Image Quickly & Easily 1

    
.image-card img 
{ -webkit-transition: 0.4s ease; transition: 0.4s ease; } 

.image-card:hover img 
{ 
-webkit-transform: scale(1.08); 
transform: scale(1.08);
}

Here's how the zoom look like:

Elementor Zoom Image Quickly & Easily 2

Method 2: Elementor Image zoom without overflow

Step 1: Place the Image inside an Inner Section

Elementor Zoom Image Quickly & Easily 3

Place the image element inside the inner section marked by the red pointer.

Step 2: Open Edit Image properties

Go to the Edit Image toolbox for the image element and open the Advanced tab. In the Advanced tab change the CSS class to "image-card".

Elementor Zoom Image Quickly & Easily 4

Now open the Custom CSS tab below and add the below CSS code to it.

Elementor Zoom Image Quickly & Easily 1

    
.image-card img 
{ -webkit-transition: 0.4s ease; transition: 0.4s ease; } 

.image-card:hover img 
{ 
-webkit-transform: scale(1.08); 
transform: scale(1.08);
}

Step 3: Open the Edit Section Toolbox

Elementor Zoom Image Quickly & Easily 6

Elementor Zoom Image Quickly & Easily 7

In the advanced tab change the Top and Bottom margin to 90 or any preferred value suitable to your website design.

Step 4: Open the Edit Inner Section Toolbox

Elementor Zoom Image Quickly & Easily 8

Open the Elementor navigator toolbox to access the inner section toolbox. Clicking on the inner section tab with automatically open the edit inner section toolbox to the right.

Elementor Zoom Image Quickly & Easily 9

  1. Under the layout tab, change the Column Gap attribute to "No Gap".
  2. Change the Overflow  attribute to "Hidden".

Elementor Zoom Image Quickly & Easily 10

  1. Under the Advanced tab change the margin to 30 or any other value suitable to your website's design.
  2. Remove all padding from the inner section. That make their values to 0.

Here's how the zoom looks like:

Elementor Zoom Image Quickly & Easily 11

Conclusion:

Alright! Now you know how to zoom an image in Elementor in two ways. This will help you to build professional looking websites quite easily.

Comments

8 Responses

  1. hi does this work only with elementor pro? because when i open the CSS tab it tells me i have to upgrade on pro. is there any wor around to use methode 2 with normal elementor? thank you in advance

    1. Maxime Desrosiers thanks. unfortunately i am not so advanced. can i just coppy vour css code in the html widget or do i have to change something in the code?

    2. Renato Ducati Place your CSS code within <style></style> tags, in the html element.

      like this:

      <style>
      //css here
      </style>

  2. Thanks for sharing this!! I am trying to achieve something like the second way, but for the background image of the section (I have some text in front of it)

    1. Hey Christian! The code required would be quite a bit different then... A bit out of the article's scope! Send me a message if you are interested in custom work for this tho.

Leave a Reply