Growing & Shrinking Background Image in Divi

by

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.

Check out the video above to learn how to implement the pivotal effect in Divi today! We use ANTHEM in the video for demo purposes, but this will work on any Divi site.

step 1: watch the video…carefully

 

step 2: make “section module settings” background colors transparent

 

step 3: Go to section module settings > custom CSS

Everything should show up as transparent.

step 4: add pivotal code in (11:00)

gimme that code!
/* ==========================================================================
   BACKGROUND IMAGE GROW - PIVOTAL
   ========================================================================== */
.pivotal:before {
  content:"";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center;
  /*background-position: left bottom;*/
  background-size: cover;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
@media only screen and (min-width: 767px) {
  .pivotal {
    overflow: hidden;
  }
  .pivotal:hover:before {
      transform: scale(1.1);
      /*background-position: right top;*/
  }
}



/*PUT THIS IN THE :BEFORE CSS AREA OF THE SECTION {
  background: linear-gradient(
  rgba(78, 78, 86, 0.25),
  rgba(78, 78, 86, 0.25)
  ), url("http://anthem.artillerymedia.co/wp-content/uploads/2016/07/sanfran2.jpg");
}*/

step 5: mess around with the speed.

We recommend “.5”

step 6: change the positioning of the background (17:00 – 21:00)

step 7: tinting images (22:00 – End)

 

You can find the “Gradient” app here! Play ’round with the tinting, positioning, and timing!

Stay Fly,
Superfly Squad


You can use this trick on any Divi site! But if you like the demo we used, it’s called “ANTHEM” and it’s pretty fly if we may say so ourselves…

5 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

Submit a Comment

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