Want to learn how to use CSS with Divi?
Our CSS & Divi Beginner Course is now open for enrollment!
Three Easy to Edit Image Hover Effects Free Divi Layout.
This free Divi layout uses the native Divi image and text modules with absolute positioning to show or hide text or swap the image for another on hover.
View the demo and download this free layout plus 24 other awesome free Divi resources by subscribing below.
Be sure to view the ‘Read Me’ file in the download package for full instructions.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 
Michelle X
Great tutorial Michelle, is there a way of two combined as in…Image with text displayed but on hover, different text is displayed?
This is all now achievable using the hover options in the module settings
I make image linkable with text hover effect but in mobile and iPad version the link doesn’t work.
Why?
Awesome tutorial (and looks great on my site)! One question, the CSS section at the top of the Divi builder is creating a white space on my page layout. Can I hide the CSS section from the layout and still have the CSS function? Thank you, this is great!
If it is in a fullwidth code module, it will not display on the front end. However, you will see a space in the visual builder when editing there.
You could just add the CSS code into the overall page css area rather than using a seperate module within the page. As long as you reference the class names it doesnt matter where the css lives. I think Michelle only did this way easily find the css for demo purposes (a good way to do that!).
Michelle’s tutorials are the best! I have been using a lot of plugin a for the last few months and didn’t know what I have been missing.. found this gem.. keep it uppppppppppppppppppppppppppppp
The json file won’t load to my page. What am I doing wrong?
Just tested it and worked OK. Be sure you are using current version of Divi.
Hello,
nice tip thank you very much. One question is it possible to swap the image on hover and add a text when hover? Thank you?
Yes, all the CSS is there, just incomporate the hover effects from the first and third versions.