Elementor Zoom Image Quickly & Easily
Get Premium

Elementor Zoom Image Quickly & Easily

Element.How also offers premium tutorials! Check them here:

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

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Zoom Image Quickly & Easily tutorial 
 * Found at this URL https://element.how/elementor-zoom-image/ 
 */ 
</script>

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

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Zoom Image Quickly & Easily tutorial 
 * Found at this URL https://element.how/elementor-zoom-image/ 
 */ 
</script>

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.

Elementor Zoom Image Quickly & Easily

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

13 Responses

  2. 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

    2. 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?

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

      like this:

      <style>
      //css here
      </style>

  3. 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.

    1. Good idea. Here is the CSS for that. Simply adjust the "scale(1.3)" to what you want!

      .elementor-posts-container a.elementor-post__thumbnail__link .elementor-post__thumbnail img {
    transition: transform 0.4s;
}

.elementor-posts-container a.elementor-post__thumbnail__link:hover .elementor-post__thumbnail img {
    transform: translate(-50%,-50%) scale(1.3);
}

  5. Thanks for the post. Your code works great. However, I would need a small tweak - I have build an inner section, but with four columns, hence four pictures. Now when I hover over a picture, I have zoom in, but zoomed in picture though bigger is under adjacent picture. I was trying with z-index, but now change. Is there any chance to show zoomed it picture always on top of adjacent pictures / columns? Thank you 🙂

  6. Great post, easy and quick solution. I'm only having a little problem i can't solve.
    https://alu.pucoo.nl/ on this page, the overflow:hidden works most sides, but not on the left side. The image comes out of it's box. Am i doing something wrong here?

Leave a Reply