How to Create a Hover Effect for any Module
Creating a hover effect over certain images, buttons, texts, etc. will help the users visualize what they may end up clicking, differentiates your site, keeps users interested, and brings attention to certain places on your site. You will learn how to create this effect for your own blog posts.
Try hovering over this text!
Step 1
In your divi builder, create a code module and add the following code.
<style>
.btn{
transition: 0.3s;
}
.btn:hover {
transform: scale(1.2);
filter: brightness(75%);
}
</style>
Let’s break the code down:
-
.btn is the name of your effect, however, you could name it anything (ex: .banana). It’s just best practice to name it something meaningful.
-
Transition is how long it will take to fully expand when hovered over.
-
Transform is how big your object will expand when hovered over.
-
Brightness is how dimmed you want your object to be when hovered over
Step 2
Go to the module you want to be hovered over and add (btn) into the CSS class section in the advanced section.
* You will find your code modules among the other modules. This doesn’t effect the appearance of the page. It simply effects the module you altered using the code.
