Hi Nikolas, congrats on completing the challenge 🥳
There seem to be an issue where when the mouse is at the center of the picture (where the invisible "eye" is), the overlay and eye disappears. I believe this is because in CSS the effect triggers on .overlay:hover, but when the mouse is in the center it is hovering over the invisible <img class="view"> instead of the <div class="overlay">.
One way to fix it is to set pointer-events: none to the <img class="view">, https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.
Another way to fix this is to remove <img class="view"> and add it as a background-image to the overlay instead.
I hope you wouldn't mind if I share my solution with you. It uses background-image as well as :after - https://www.frontendmentor.io/solutions/nft-preview-card-component-rJRIRaSVc
Hope this helps and happy coding!
Marked as helpful
@NPM0486
Posted
@Milleus Thanks a lot! I didn't even notice the error. I have corrected my mistake. :D
