NFT preview card component

I encountered two issues: The first one occurred when I attempted to create an overlay layer over an image using the ::before pseudo-element directly within the image element itself, but it didn't work. The code I used was: .card:hover img::before { content: ""; position: absolute; background-color: hsla(178, 100%, 50%, 0.749); width: 100%; height: 100%; top:0; left:0; } To resolve this, I had to add a div before the image and style it to achieve the desired overlay effect. However, I'm still curious about why the approach in the above code didn't work as intended.

The second problem I'm currently facing is that the transition I applied (0.4s) to the overlay on the image when hovering over the card isn't functioning as expected.