Transparent Dark Overlay on Image Hover

Hey, this is a kinda mini blog post. I just wanted to share this PEN quickly with you guys. When developing modern websites we all love to add nice hover effects. I was working on this eCommerce project and wanted to add a dark transparent overlay on mouse hover. It’s entirely done with CSS and HTML. No jQuery or any other library required.

This is the basic setup, only codes which need to create the effect included in the pen. So you can easily understand the concept.

Okay. That’s it. Merry Christmas people, happy holidays.

Cover Photo by Guillaume Bourdages on Unsplash

Leave a Reply