How to make a transparent hover overlay image in Wordpress using Divi Theme that is responsive

[HickoryMe]

Hi,

I saw this awesome affect on a Creative Agency Website and would love to know how they did it. It's the first section after the header on the homepage.

I'm using the Divi theme on wordpress which allows you to put CSS before, main, after the module and also in the CSS theme options with Classes and ID's. https://kipo.us/en/

If it's not apparent already, I'm a total coding newbie so any help would be appreciated in a language I have the best chance of understanding!

 

[Paul Murray]

The way it works is you have two sections on top of each other. When you hover over this section, it triggers a CSS animation that takes the top container from 100% opacity to 0%, revealing the image below. It's a really simple trick and easy enough to do using just CSS. I'd read up on how to do CSS transitions and how to create a div on top of another as starting points.