@chrizgx
Posted
Hey! I think there is a much simpler solution to your problem with just 2 lines of code. The reason why opacity is being applied to the eye icon is that you apply opacity on the whole div.overlay, which includes the eye image. What you can do instead, is simply replace the HSL(178, 100%, 50%) background color with the equivalent RGBA #00fff760. It's the same color, except that opacity is applied to the background-color itself and not the whole div element.
After that, change .overlay:hover to {opacity: 1}
O had the exact same problem, that's the solution I used too. You can see the outcome here: https://chrizgx.github.io/frontendmentor-nft-preview-card-component-main/
And the code too: https://github.com/chrizgx/frontendmentor-nft-preview-card-component-main/
Feel free to ask anything, I'm happy to help
Marked as helpful