NFT Preview card

Hi !

Nice work.

I had the same problem, so i put opacity at 1 for the SVG "eye" when hover and play with HSLA and the "background-color transparency".

In your case it will be something like : background-color: hsla(178, 100%, 50%, 0.502);

With your code :

.top-section:hover .overlay { opacity: 1; }

.overlay { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: hsla(178, 100%, 50%, 0.502); border-radius: 10px;

HSLA : https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla

Regards :)

Hola! quedó Increible!

Algo que yo pude implementar, es utilizar el HSLA para agregarle opacidad al fondo del elemento que esta por encima de la imagen del NFT, brindando la posibilidad de que el ojo pueda visualizarse en su tonalidad normal al activarse el :hover. De todas formas me encanto el efecto de incremento de la opacidad!!