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.

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments