Adding an Overlay to your Graphics with CSS


In this article, Solodev shows you how to add a title overlay to your graphics which is triggered when hovering over an image.

Adding an Overlay to your Graphics with CSS

Image overlays are a great way to get the most out of the space on a web page. While one static graphic is better than none, adding an overlay provides more context to the content you'll find after clicking the image.

By simply hovering over the image, you gain a further glimpse into why you should click on that particular image. In this article, Solodev shows you how to add a title overlay effect to your graphics which is triggered when hovering over any of the images in the grid.

Below is the HTML, CSS, and JavaScript required.

Step 1 - overlay.html

Copy and paste the HTML below into your web page


Step 2 - overlay.css

Download the CSS below and include it in your web page

 overlay.css

Step 3 - Add the includes below to your web page

In this article, Solodev showed you how to add an overlay effect to your website's images which are triggered when hovering. Swap out the images and text to make it your own!

Author

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.