@Ibarra11
Posted
You had the right idea with the overlay nesting it within the picture. After that you have to set the overlay to absolute and you want it to fill the entire picture container, so you have to give it 100% width and height. At this point the overlay is sitting on top of the img and once you give it a background it will hide the image. You have two options you can set the overlay to display: none or set its opacity to 0 and when the user hovers over the picture you set the overlay class to either display: block or opacity 1. In my opinion, I think the opacity choice is better, but you can choose which make ever makes sense to you. I'm going to include a code-sandbox if you want to take a look at how I implemented it - Sandbox. https://codesandbox.io/s/objective-galois-chtm1u?file=/index.html
