NFT Preview Card Component with hover effects

The only thing that bothered me most was the transparent hover effect. Though I used position: relative and position absolute to overlap. The top value was not responding to the anchor point but viewport which was extremely troublesome because changing the height or width of the viewport would move around the overlay and stop it from overlapping. Setting the width of it to the width of the image would work nicely with a huge caveat that the SVG icon would scale to the width and overlap the whole screen with the huge eye of Sauron. I ended up using a combination of padding and margin to make it work but it doesn't feel like the ideal solution. Another thing that I am unsure of is the line, I used the <hr> tag and my line is thicker than it should be because making it any smaller was splitting it in 2. Any feedback regarding both is definitely welcome and I would love any feedback regarding making my code better with better practices. Thanks for your time!