Getting the CSS Hover to Work was Fun!

It works by using a combination of rgba and opacity, which gives us access to two different layers of transparency. The hover selector triggers the opacity to go from 0.0 (invisible) to 1.0 (100% visible) with a transition time of 0.25 seconds. Since the rgba maintains a different opacity through the "alpha", we're still able to create a transparent overlay using an opacity set at 0.0. Hovering can then yield a transparent layer using css instead of having to use JS to create a similar effect.

I used the Foundation grid system to show how to put them in thumbnails and make them responsively collapse. You might need to use media queries in some cases to dynamically resize them since the background images aren't automatically resized based on the collapsing grid system and will overlap in some cases. After that it's pretty solid!

I hope it's useful for someone else out there! I couldn't find a really great resource to do a transparent hover effect using only CSS so I did some research and made detailed notes to clearly mark up all the necessary parts.


9,377 0 6