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: .hover).

  • 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 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.