CSS Flex

Community feedback

• 

  Daniel•230

  @danielbrahPosted about 2 years ago

  For the hover state, I would change the following code:

  .card__img:hover::before {
     display: block;
  }
  

  to this:

  .card__img:hover::before {
    opacity: 0.4;
  }
  

  Under the .card__img::before selector, change the following properties: opacity: 0.4; to opacity: 0;, and display: none; to display: block

  Then you can add your transition for the opacity property! The transition does not work for the display property. The display property was basically swapped for the opacity property in the hover state for .card__img::before.

  Marked as helpful

  1

  ---

  

  Jair Rodriguez•310

  @JairthPosted about 2 years ago

  @danielbrah Thank you very much!! I did not know that detail of the transition. I also have a problem with the transition for my h1 and my strong. Is it also due to some other property?

  0

  

  Daniel•230

  @danielbrahPosted about 2 years ago

  @Jairth Did you fix the problem already? It seems that the transitions on both the h1 and strong element is working just fine.

  0

  

  Jair Rodriguez•310

  @JairthPosted about 2 years ago

  @danielbrah The transition is shown on my cell phone but not on my PC hahaha I don't understand

  0
• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Buenas Jair, enorabuena por terminar el challenge! te quedo muy bien el NFT card, como mencionas, solo te falta la transición.

  Meter transition en un pseudoelemento es bastante complicado, lo que podrías hacer es en vez de crear un pseudoelemento, es lo siguiente:

  Primero de todo quita los pesudoelementos que has creado.

  A tu div con la clase card__img añadele el background: var(--Cyan) en hover, es decir: `card__img:hover { background: var(--Cyan); }

  Luego añadele una clase a tu imagen para estilarla por ejemplo card__nft y ponle opacity: 0.5 en hover, algo así: card__nft:hover { opacity: 0.5; }

  Con esto ya tendrás el mismo efecto que antes, ahora para añadir la transition, en el selector de tu imagen que has creado antes añades: transition: opacity 0.5s ease;

  Y con esto ya tendrías el efecto de transición de color cuando hagas hover por encima del NFT.

  Si te queda alguna duda o lo que sea no dudes en preguntarme, espero que mi feedback te sea de ayuda, buen trabajo!

  Marked as helpful

  1

  ---

  

  Jair Rodriguez•310

  @JairthPosted about 2 years ago

  @DavidMorgade Gracias David! Me comentaron que el transition no funciona con el display:block, pero con el opacity, si. Pude resolver el problema. Ahora estoy tratando de ver el problema del transition en mi h1 y el strong.

  1