How to create a background image zoom effect on hover

by | Jan 14, 2018 | Divi, Light Side

Preparing the image:

Let’s add an image background to any section, row or module where you want to apply this zoom hover effect.

Once it’s added, move to the Advanced tab.

Add a class name for your section, row or module. I will use a blurb module and the class name: “zoom-effect”.

Now it’s CSS time, let’s go to the builder hamburger menu icon if we are in the back-end builder or the gear icon if we are in the visual builder.

Paste the next in the CSS box, if you are using a different class name, don’t forget to change it in the code below.

1
2
3
4
5
6
7
8
.zoom-effect {
    background-position: 0px 0px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    background-size: 500px 300px;
}
1
2
3
4
.zoom-effect:hover {
    background-size: 800px 600px;
    background-position: -50px -50px;
}

The code:

In the first piece of code we are defining a transition, the image size and position values.

In the second one goes the hover magic by just changing 2 values.

Now, it’s time for you to play with the BACKGROUND-SIZE property values and adjust them to your necessities.

The BACKGROUND-POSITION values are for placing the image, try changing the values and find out what’s best for you!

If you want to apply this effect to more pages, just move the code to the Divi global css box under, WP Dashboard -> Divi -> Theme Options -> Scroll to see the CSS box.

Congrats! You just did it!

I AM A DEMO BLURB

 

[coffee]

6 Comments

  1. Willam Bellomy

    How would you get this effect on a text box background image if you already have a CSS Class: named in the Advanced Tab?

    I created a nh-button closed class that would make named sections appear of disappear, kind of like an accordion effect. So now when I go to try to apply your code I already have a CSS Class: named. Can you stack them?

    Thanks,
    Willam

    Reply
    • Nico Master

      Hey William, you can add multiple CSS clasess just use a space and you can writte the next class. So yes you can have multiple clasess.
      Hope it helps 🙂

      Reply
  2. Ben

    Another option that isn’t so specific on size and more flexible is to use % such as:

    .zoom-effect {
    background-position: 0px 0px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-size: 100% ;
    }
    .zoom-effect:hover {
    background-size: 110%;
    }

    Reply
  3. this website

    Wonderful blog! I found it while searching on Yahoo News.
    Do you have any tips on how to get listed in Yahoo News?

    I’ve been trying for a while but I never seem to get there!
    Cheers

    Reply
    • Nico Master

      Thanks! Im afraid I have on idea how you found me on yahoo news 😀 But i guess it is good , so yay!

      Reply
  4. wordpress divider plugin

    you are in reality a good webmaster. The web
    site loading speed is incredible. It kind of feels that
    you’re doing any distinctive trick. Moreover, The contents are masterwork.
    you have done a wonderful task in this subject!

    Reply

Submit a Comment

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

How to Cache and Boost WordPress Performance

How to Cache and Boost WordPress Performance

Want to boost your site performance? Learn how to do it by activating caching in your site. With a simply and clean plugin and as always in a couple of minutes. Let’s not forget about the small extra for fixing Google Analytics!.

How to Make any Element Fixed – Divi Builder

How to Make any Element Fixed – Divi Builder

Want to learn how to make any Section / Row / Module fixed? So whenever you scroll the element stays in there with you! Learn how to achieve this trick in a couple of minutes with R2D2 help!.

How to Maintain a WordPress Site Clean

How to Maintain a WordPress Site Clean

Hello everyone, is time to talk about how can you clean your WordPress site for a better maintenance, optimization and security purposes in just a couple of minutes once again!

Follow MasterDivi on Facebook

Be updated with the latest tricks!