Create Custom Image Overlays

Create Custom Image Overlays

One of the newer features of Divi is the ability to add overlays to the image module. It’s cool and gives you access to the same overlay set-up that you’re used to on the portfolio module (overlay color + icon), but if you wanted to add your own image overlay then it doesn’t really offer what you need. Fortunately, it is simple to achieve a custom image overlay with a few lines of CSS. This type of effect is great for watermarks etc.

Here’s an image to show you what I mean…

overlay
  • Google+
  • Facebook
  • Twitter

Making it work.

To get this effect on an image module, you just need to give the module a custom CSS class. In our code example we used ‘overlay-one’.

class
  • Google+
  • Facebook
  • Twitter

 

Then just add the following code. The only line you need to change is the url path to your overlay image.

/* Make sure our absolute positioned overlay doesn't cover more than we want it to... */
.overlay-one { position: relative; }

.overlay-one:after {
 position: absolute;
 content: '';
 background: url('newimagepath/overlay.png');
 background-size: cover; /* Make overlay fit the window of our original image */
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 opacity: 0; /* Make's the overlay invisible until we hover */
 transition: .5s ease all; /* How long the transition takes */
}

.overlay-one:hover:after {
 opacity: 1; /* Make Image Appear */
}

That’s all there is to it! I hope you found this post useful. 🙂

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.