Made using TailwindCSS

Feedback welcomed!

This one was a bit tricky to figure out how to do the overlay on the image. Googled a little bit, found on tailwind about the 'group' class which you can tie to a parent and then the children can be styled depending on the state of the parent by using group-[modifier] so in my case i used group-hover: utility to control the opacity of the div that holds the SVG and cyan background. If the parent is not hovered, the svg+background has opacity-0. If it is hovered, then the div has opacity-100.

The only thing is that i had to make another custom color in this scenario where the background cyan color is hsla to control the alpha opacity directly like that.

Pretty cool solution although not sure if ideal, but i learned something new!