Search

How to Add Hover Effect Only on Featured Image in the Divi Blog Module

Are you a Divi user and are looking for ideas for styling your Divi Blog module? This article might be helpful for you because here, we will show you how to add a hover effect only to the featured image on the Divi Blog module. Adding a hover effect will alternate the appearance of the featured image interface once the mouse hovers over it, even if it has not been clicked, so your Blog module will look more attractive.

Steps to Add Hover Effect Only on Featured Image in the Divi Blog Module

Step 1: Add a Blog Module

Go to your Divi Builder editor, and we will start everything from scratch, so create a section with a single column, select the Blog module and insert that module into the column. Once you add the Blog module, you can edit and style up as you prefer.

Step 2: Add the CSS Snippet

Next, we will move on to the next and final steps. In this step, we will add the CSS snippet to the Blog module, especially in the featured image section.

On the module settings, go to the Advanced tab -> Custom CSS -> Featured Image. Once you enter the Featured Image section, please enable the hover option by clicking the cursor/hover icon.

Afterward, copy the CSS snippet below and paste it into the hover field.

transition: all .50s ease-in-out;
    transform: scale(1.20);
    cursor: pointer;
    z-index: 1;

That’s it. As you can see from the GIF above, the hover style is adequately worked on your featured image only. If you are happy with the style of the featured image hover, you can keep it like this and save or publish your project if you want to. But if you want to customize it, you can edit the values on the CSS snippet.

Note: Scale transform/zoom-in is a common and popular hovering effect style used on websites. If you want to know more about others’ hovering effect transform methods, you can visit this page.

CSS 2D Transform: Rotate

The Bottom Line

This article shows how easily you can add a hover effect only to the post thumbnail (featured image) in the Divi Blog module — using Divi Custom CSS. We give two examples of hover styles (scale/zoom-in and rotate) included in CSS 2D transforms. Customize and play around with all the hover effect styles until you find the best hover effect for your site.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) to the cloud and access from any website you create.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.