Logo Pupungbp.com

Need a WordPress expert help?

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.

Zoom hover effect

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.

Looking for an affordable WordPress solution?

We offer budget-friendly WordPress website development services to meet your needs. Prices start at $10.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.