How to Create Hover Zoom Effect on Elementor

Last Updated: September 2, 2023 | Reading Time: 2 minutes

The zoom effect is the most popular effect on the user interface design when you hover over a link image. You can see it live on the Pracia webkit demo.

How cool is that? In Elementor, you can create it easily with no additional coding needed. I will show you how to make it.

Simpler version

Here’s the structure of the containers we will use for the zoom effect:

Let’s create it in Elementor:

1. Add an empty container.
   
   Lets narrow the container to about 250px.
   
2. Give the container an Overflow: Hidden Property.
   
3. Add thin border and zero padding on all sides of the container so the element inside will touch the edge of the container.
   
   
4. Add an image inside the container, and give it a Hover animation: Grow.
   
   
5. That’s it! Here’s a working example.