This Divi Snippet focuses on Call to Action. SJ shows you three CSS powered tricks you can do with your CTA module.
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.
Your Comments