Simple Thumbnail hover effect in Divi

by

A super simple way to create an image hover effect in Divi is to use some simple CSS.

  1. Create an image Module and add the image you want to see initially.
  2. Add a Background Image – this will be the image that is revealed on hover.
  3. Give your Image Module the following CSS Class (found in the Advanced tab):
  4. Add the following CSS either to the Divi Options, or to the Page options:
.imageHoverHide img{
  transition:opacity 0.2s ease-in-out;
}

.imageHoverHide img:hover{
  opacity:0;
}

The “0.2s” defines the speed of the fade in seconds. Feel free to adjust it to your liking.