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.
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
Logan,
Thanks for the info and props! =)
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.
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′);
Sweet tutorial, John. Thanks for another killer addition to Divi!
You’re a Ninja!