NFT preview card component using HTML & CSS (Flex)

Community feedback

• 

  WandoCode•840

  @WandolePosted almost 2 years ago

  Hola!

  Para empezar, espero que vayas a entender todo lo que voy a escribir porque el Español no es mi idioma maternal y no estoy acostumbrado de explicar cosas de informática en español :o

  • Para hacer el hover, puedes poner una div justo alrededor del tag <img.../>. Tiene que tener exactamente el mismo tamaño que el imagen.

  Esa div va a servir para crear un pseudo-elemento before:

  div {
     position: relative; // Eso es util porque voy a utilizar una posicion 'absolute' en el pseudo- 
                                     // elemento ==> Asi la posicion del pseudo-elemento sera calculada según  
                                     //la 'div'
  }
  
  div:hover:before {  
     content: '';         // Si no pones eso, el 'before' no existe !!!
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;              // Esos '0' sirven para dar la posición del 'before' en la 'div' ==> por ejemplo, el 
                                 // tope (top) del  'before' esta a 0px del tope de la div 
                                 // Con las 4 posiciones a '0', el 'before' va a tener la misma posicion y el mismo 
                                 // tamaño que la 'div
     background-color: blue;
     opacity: 0.5;
  }
  

  Si quieres añadir el imagen del ojo, tienes que ponerla en el content: url(...).

  • Una otra solución (sin pseudo-elementos) es de crear la div y poner otra div (vacia) dentro:

  <div>
     <img.../>
     <div ...> <div/>
  </div>
  

  Puedes utilizar esta segunda div como utilicé el before. Aqui, puedes colocar la imagen del ojo en la segunda div ...

  En los 2 casos, tendras que poner el ojo en el centro pero te dejo buscar por eso!

  Espero que eso vaya a ayudarte (y que me has entendido haha)!

  Marked as helpful

  0

  ---

  

  Valentín Vera•90

  @valentinveraPosted almost 2 years ago

  ¡Hola @Wandole Muchas gracias por tu respuesta! La verdad que para que el español no sea tu idioma nativo te expresaste muy bien y se entendió todo a la perfección. Use la primera opción la cual me funciono solo que le agregue display: flex; y otras propiedades más de flex al div:hover::before para que la imagen se centre. Muchas gracias por tu ayuda. Saludos!

  0