Divi Theme Hover Effects Full Width Image To Text On Hover

by | Oct 20, 2020 | Divi Theme, Web Design, Wordpress

Divi Theme Hover Effects Full Width Image To Text On Hover. We are going to be using the Divi Image Hover Plugin to create some great effects in this series of videos.

Divi Theme Hover Effects Full Width Image To Text On Hover
Divi Theme Hover Effects Full Width Image To Text On Hover

The hover effect can be cool, and you can use it in different areas. If you want a text overlay on hover with a full-width image, you may need to go through these steps:

 

Divi Theme Hover Effects Full Width Image To Text On Hover
Divi Theme Hover Effects Full Width Image To Text On Hover
  • Add a new page.
  • Add a title to it.
  • By using “Divi Builder,” add a single row.
  • Select “Divi Image Hover” from the “Insert Module” menu.
  • In the “Divi Image Hover Settings,” change the “Hover” style to “Classic.”
  • Choose the animation or effects according to your taste and add an image with the image alt text.
  • Insert the image prefix, infix, and suffix.
  • Put in the content that you want to appear upon hovering.
  • Add the button text and the link that you want for that.
  • You can style your button with animation and effects.
  • Choose “Vertically Align Centre.”
  • You can select an “Image Overlay” as gradient, solid color, or nothing. Choose the opacity of your overlay.
  • If you want, you can add a background or swapping option.
  • Change the “Text Size” from the “Design” menu. Apart from that, you can add shadow and effects to your words too.
  • Change the Prefix, Infix, or Suffix format accordingly.
  • Choose the “Custom Spacing” option from the “Design” menu and adjust it. Add the padding or margins through this menu.
  • Custom Style your button to make it stand out.
  • You can change the row and column settings separately.
  • Go to the “Sizing” option and increase the size to a maximum of “100”. Do the same with the “Maximum Width” option.
  • Go to the module> “Advanced”> “Transitions”> “Transition Duration” and increase it to slow the speed down.
  • Save, Publish, and then exit the “Visual Builder.”
  • Refresh, and here you go.
Divi Theme Hover Effects Full Width Image To Text On Hover
Divi Theme Hover Effects Full Width Image To Text On Hover
https://bit.ly/GetDiviZoom

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