Last update: September 2, 2023 | Reading time: 2 minutes

Zoom effect is the most popular effect on UI design when you hover over a link image. You can see it live on the Pracia webkit demo.

Isn’t that cool? In Elementor, you can create it easily without any additional coding needed. I’ll show you how to do it.

Simpler version

Here is the structure of the containers that we will use for the zoom effect:

Let’s create it in Elementor:

1. Add an empty container.
   
   Let’s shrink the container to around 250 px.
   
2. Give the container a Overflow: Hidden Property.
   
3. Add a thin border and zero padding to all sides of the container so that the item inside touches the edge of the container.
   
4. Add an image inside the container and give it a hover animation: grow.
   
5. That’s it! Here is a working example.