How to Add Transparent Overlays to Images with CSS

A traditional problem many face is that they want to use images in conjunction with links or various onclick events. Unlike text links, however, there's no standard "hover" effect when it comes to an image. This can be problematic from an UI perspective because users ultimately need that visual indication that (1) there's a link and (2) they're hovering over it.

This isn't just about design and user exerpience, however. Web accessibility guidelines dictate that links need to have some distinction so that users can accurately measure where they are on a page.

So the question becomes "how do you add hover effects to image links?" Color overlays are some of the most popular visual effects that you can add to your website and which create the hover effects you want. Not only does it give your website a bit more visual complexity, but it can also help web users to identify which choice they're about to make.

This tutorial walks you through a simple way to add a bit more life into a potentially boring page. 

HTML

The HTML is rather straightforward with existing Bootstrap 4 classes. Of particular note is the "overlay-effect" div. This is an empty div that will essentially become our image overlay.

In addition to the "overlay-effect" class, you can see the classes "h-100" and "w-100" which are used to specify that the box should stretch 100% in all directions.

CSS

The most important CSS class, like the HTML, is the overlay-effect. This is where you can specify your transition properties and the overlay color:

The various "hover" classes are also important as they are what activate the overlay-effect by changing the opacity from 0 to 1.

Want to see how this functionality could look on your site before you invest the time in coding? Try it out first in the JSFiddle below! Don't forget to adjust the browser window at a variety of sizes to see exactly how the website responds in mobile format!