NFT Preview card

Community feedback

• 

  SD_Voyez•110

  @SD-VoyezPosted about 2 years ago

  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 :)

  Marked as helpful

  1
• 

  Matias gh•40

  @GatiMhersiPosted about 2 years ago

  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!!

  0