Section image fade to content on hover with the Divi theme

by | Apr 10, 2020 | Divi Theme, Web Design

Section image Fade to content on Hover with the Divi theme. In this video we are going to create a section image fade to content on hover easily with the built-in features of the Divi theme, no coding necessary. To get started we will need to enable the visual builder. Once it has loaded go down to the area where you would like to add your section, and click on the blue button to create a new section. For this example today, I’m going to add a five column row. We will only actually be using the middle three columns, as we are going to make the row full width, and give the illusion that the content is still boxed.

Now we have our columns in place, I am going to add a blurb module two columns 2, 3 and 4. Of course you can add any modules you wish to this row, for expediency, I am simply using the blurb modules.  Style the modules how you wish. Now that the modules are in place, let’s put a colored background behind the row. My aim today is to have a red background that fades to blue when the mouse hovers over it. This is easily achieved by going into the row settings, under the content tab go down to background. Now hover the mouse over the dark writing that says background, you will see several icons appear just to the right of it. Select the arrow icon. You will now see two tabs appear, one that says hover and one that says desktop. Click on the desktop tab and give it a background color of red. Now click on the hover tab and give it a background color of blue. When a visitor hovers over this row the color will change from red to blue. I want to slow down the transition time it takes to switch between the two colors. To do this click on the advanced tab at the top, and go down to transitions. Go down to transition duration and set your desired time in milliseconds. With this example today, I’m going to set the time to 2000 milliseconds or 2 seconds. Now save the changes and exit from the row.

Let’s start working on the section. Left click on the cog on the blue section tab. Go down to background, and add your desired image. If you wish you can also add a background color, and use the fantastic blend modes under the image tab to create some stunning effects. You should now have a background image behind your row, but at this point the row is still visible and my goal is to have the row, and its contents only appear on hover. To achieve this let’s go back into the row settings again, click on the cog on the green tab. Now let’s go to the design tab and down to the filters section. Once you expand the filters section, go down to the opacity slider. Again, we will need to click on the little arrow beside the dark opacity writing, to bring up the desktop and hover options. Click on the desktop tab and then slide the opacity slider all the way to the left, this will make the row invisible. Now click on the hover tab, and slide the opacity slider all the way to the right-hand side or 100%. This will make the row and contents fully visible when a mouse is hovering over it.

The final step to making the section image Fade to content on hover, is to remove any extra padding that is on our section, so that both the section and row will be the same height. To do this go back into the section settings, go to the design tab, and down to spacing. Simply enter 0px into the top and bottom boxes. Save the changes to the section. Save the page changes by clicking on the purple button at the bottom, and then hit save on the green button on the bottom right-hand side. Exit the visual builder and go down and take a look at your section. Now when you hover your mouse over the image you should see your row and content appear gradually over 2 seconds. That is how easy it is to create a section image fade to content on hover, using the fantastic Divi theme.

For our readers, get any of the below courses for just $9.99 each. Just contact me with the course name and I’ll email you the discount coupon.

Subscribe To Our Newsletter

Join the System 22 mailing list to receive the latest tech tips, deals and updates from our team.

We will never spam or share your email!

You have Successfully Subscribed!

Pin It on Pinterest

Share This