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.
Here’s the structure of the containers we will use for the zoom effect:
Let’s create it in Elementor:
- Add an empty container.
Lets narrow the container to about 250px.
- Give the container an Overflow: Hidden Property.
- Add thin border and zero padding on all sides of the container so the element inside will touch the edge of the container.
- Add an image inside the container, and give it a Hover animation: Grow.
- That’s it! Here’s a working example.