NFT Preview Card Component

Community feedback

• 

  MaximilianoDanielGarcia•2,000

  @MaximilianoDanielGarciaPosted 12 months ago

  Hola Alex, buen trabajo!

  Para solucionar tu problema con el estilo hover necesitas agregar position: relative; a tu clase .imgContainer. Luego, realizar estos cambios:

  .imgContainer::before {
      top: 0;
      left: 0;
  }
  
  .imgContainer::after {
      top: 50%;
      left: 50%;
  }
  
  

  Una vez apliques estos cambios funcionará como esperas.

  Un elemento con position: absolute; se posiciona en relación con el ancestro con position: relative; más cercano, en tu caso al no especificarle uno estaba tomando como ancestro al body. Para más información al respecto te sugiero visitar w3schools.

  Espero te haya ayudado.

  Marked as helpful

  1

  ---

  

  Alex Mdz•120

  @AlexMdz5620Posted 12 months ago

  Va va va muchas gracias!!! @MaximilianoDanielGarcia

  0
• 

  SuperJulia2024•220

  @SuperJulia2024Posted 12 months ago

  Hola Alex,

  Yo he creado un container que tiene como imagen de background la imagen "equilibrium". Ese container incluye una imagen que es el icono icon-view. Cambiando el valor del atributo visibility de ese container cuando pasas el ratón por encima logras el efecto (el icono aparecería por encima de la imagen de background cuando pasas el ratón por encima y la capa verde se pondría por encima de la imagen de fondo)

  Sería así:

  En html:

  <div class="img-container"> <div class="transparent-layer"><img src="./images/icon-view.svg" alt="View icon"> </div> </div>

  Luego en el fichero css:

  .img-container .transparent-layer {

  position: absolute;

  border-radius: 12px;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  visibility: hidden;

  background-color: var(--cyan-color-t);

  }

  main .img-container:hover .transparent-layer {

  visibility: visible;

  cursor: pointer;

  }

  Espero que te sirva !

  Marked as helpful

  1

  ---

  

  Alex Mdz•120

  @AlexMdz5620Posted 12 months ago

  Ohhh!!! ok ok muchas gracias!!! Más tarde lo aplico!!! muchas gracias!!!

  0