NFT card with hover states.

A fun project that really made me explore in depth what exactly pseudo classes are (::before & ::after), as well it gave insight on how to use position: relative and absolute. I'm not going to lie, achieving the hover state on the main image was far more difficult than I had initially anticipated. It took me 2 days of trial & error, as well as learning to finally achieve the desired result.

Question(s):

1. When hovering over the main image, you can see the translucent cyan overlay goes a bit beyond the lower border of the actual image or the image wrapper. Its not by much, and certainly I can get away with this result as is - but I'd love to have insight as to why this is happening.

2. For the hover states on the main image I used position absolute & relative to center the "eye" SVG icon to its parent wrapper. As well for the cyan overlay which is translucent, I used an empty div in the parent container of the main image, to which I then applied a ::before pseudoclass. If anyone has an alternative or ideally more simplified method of achieving these hover affects please let me know.