CSS Flex

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.

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!