Growing & Shrinking Background Image in Divi

Published on February 20, 2017
Check out our new pivotal effect to add some sweet growing + shrinking action to your site to spice things up. We’ll even walk you through it.

This tutorial will help you with growing and shrinking background images in Divi.

This gives background images a great fade in/ fade out effect. Have some fun on hover effect changing the background position so that the image moves and learn to use the CSS multiple background so you can stack a color overlay on the background image as well.

We use ANTHEM in the video for demo purposes, but this will work on any Divi site.

6 Comments

  1. Logan Ramirez

    Solid as always, John! Thank you for putting this out there. I really appreciate the transparency of your tutorials and the creativity of BeSuperFly in general.

    Regarding the ‘content’ requirement for pseudo classes, according to the spec (link below) the pseudo class will not generate if it’s missing – so setting the empty string ensures the pseudo class is available to use at all.

    https://www.w3.org/TR/CSS2/generate.html#content

    Reply
    • John Wooten

      Logan,

      Thanks for the info and props! =)

      Reply
  2. Betty

    Is there a Gradient app for Adroid or web browser or Windows 10? I do have Anthem and Divi. Just want to change the colors.

    Reply
    • Jake Kramer

      Hey Betty, we haven’t used a Gradient app for Windows ourselves, but you can try this link from any browser. If not, feel free to just adjust the code and set the colors manually. This is the code that the Gradient app spits out:

      background-color: #145381;
      background-image: -webkit-gradient(linear, left center, right center, from(rgb(20, 83, 129)), to(rgb(178, 88, 88)));
      background-image: -webkit-linear-gradient(left, rgb(20, 83, 129), rgb(178, 88, 88));
      background-image: -moz-linear-gradient(left, rgb(20, 83, 129), rgb(178, 88, 88));
      background-image: -o-linear-gradient(left, rgb(20, 83, 129), rgb(178, 88, 88));
      background-image: -ms-linear-gradient(left, rgb(20, 83, 129), rgb(178, 88, 88));
      background-image: linear-gradient(left, rgb(20, 83, 129), rgb(178, 88, 88));
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr=’#145381′, EndColorStr=’#b25858′);

      Reply
  3. Lilly

    Sweet tutorial, John. Thanks for another killer addition to Divi!

    Reply
  4. Janet

    You’re a Ninja!

    Reply

Leave a Reply to John Wooten Cancel reply

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

Shopping cart0
There are no products in the cart!
Continue shopping
0