On Friday the 29th of June, Divi Space hosted the first of their new series of Facebook Live webinars about supercharging the Divi modules. This Webinar focuses on Call to Action. SJ shows you three CSS powered tricks you can do with your CTA module.

If you missed the Facebook live, you can rewatch it at any time!

https://www.facebook.com/wpzoneco/videos/1790215941026538/

SJ will be sharing the code for Type Text Animation, Image Fade Rotation, and a Sunrise Transition. The only Prep necessary is giving each effect its own CSS class. This will keep the effects running only where you need them to.

Image Fade Rotation

First, you need to create a before element. Creating a display block with standard parameters helps you make sure the code is working correctly. Then you place the URL of the image you’re using inside brackets on the background line. A couple more simple commands and the image is sized correctly and centered. The next couple of lines of code make the image larger so it will cover the entire area as it rotates and hides the overflow. Lastly, you’ll set the starting degree of rotation and the amount of opacity and the Zed index if you want to tint the photo.

Now you are ready to set the appearance on hover. Copy most of the code you’ve written so far and relabel it hover before. Set the values that you want to change and delete the second instance of the code that you want to stay the same. At this point, you’ll have a sudden jump between the two images. A line of code between the two main blocks will set the speed and style of the transition.

Remember copying your code, deleting it, reloading the page, and then pasting the code back in is a good way to test that all the code will work correctly from load.

Sunrise Transition

The Sunrise Transition’s code is very similar to the code for Image Fade Rotation. The code will work the same for setting your beginning parameters. You’ll want to code a small box in a corner of your CTA component and round the edges using a border radius percentage. To make the effect cover the entire area expand the width and height of your extra box and then set your new circle’s center at the corner of the component. Set the correct color of your sunrise and you’ll be ready to set the hover and transition parameters. The larger you make the sunrise element the more of a delay you’ll have before the effect reverses when you hover off.

These before and hover before commands with transition could be used for a wide variety of effects on your CTA modules.

Type Text Animation

Typically type text animation is done with JavaScript or jQuery but if you only want to animate one or two lines here is a way to do it without having to load an entire JavaScript library.

Using the class you created in setup you create a line to act as a cursor and then move it in near the text you’ll be working with. Next you’ll set the margins of your text and code the white-space and overflow to make the text disappear as you lower the width.

Moving away from CSS it’s time to create keyframe animations.  A short line of code creates a typing animation and another short line creates our simulated blinking caret. Time to head back to the CSS. Write the code to get the animations to run, and then tweak the values to get them to run smoothly.

There are two things to take note of. First, you can run multiple animations on the same line if you place the comma between them. Also, if you make your own animation run it through a CSS linter to get the web kit and MS animations.

Here’s the code:

/* Image fade */
.image-fade:before {
display: block;
position: absolute;
content: "";
background: url('folder/image.jpg');
top: -20%;
left: -20%;
width: 140%;
height: 140%;
z-index: 0;
opacity: 0.05;
background-size: cover;
background-position: center;
transform: rotate(-10deg);
transition: 1s ease all;
}

.image-fade:hover:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
transform: rotate(0deg);
}

.image-fade {
overflow: hidden;
position: relative;
}

/* typed */

@keyframes type {
from { width: 0; }
}

@keyframes caret {
50% { border-color: transparent; } }

.typed h2 {
border-right: .1em solid

#fff

;
width: 266px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
animation: type 6s steps(24, end),
caret .3s step-end infinite alternate;
}

/* sunrise */

.sunrise:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
left: 0;
bottom: 0;
background:

#ff8900

;
border-radius: 50%;
transition: 1s ease all;
}

.sunrise:hover:before {
width: 300%;
height: 300%;
left: -150%;
bottom: -150%;
}

.sunrise {
position: relative;
overflow: hidden;
}

The code can be dropped into Divi's CSS options or into a child theme and should work seamlessly. If you do use this code please let us know where you've used it. We are always excited to know the code we share is being used.

Since this is CSS you aren’t going to kill or break anything. Play with the values and see what works best for you.

There are going to be several more Supercharging Your Divi Modules and David Blackmon plans on posting a list so you can be sure to watch the ones you are most interested in. SJ is currently planning for the next supercharging webinar to feature sliders – showing you three effects you can add to the default Divi slider using CSS and jQuery instead of using a third-party slider.