Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Flexbox positioning, hover techniques

P

@CharlieCastleWeb

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have a bug. On loading the page there's an image that moves and I haven't found a solution for it.

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

Hola Carlos, no es exactamente un bug lo que pasa es que cuando se carga tiene un estado inicial y en ese estado el ojo tiene su posición y lo estas trasladando al medio para que quede centrado por eso se mueve, esto seria automático pero le has puesto animación.

Ahora realmente no se como solucionarlo pero transition tiene varios atributos y solo has usado el de retardo y tipo de transición también tiene otro para ver la propiedad a lo cual quieres aplicar. Podrías poner algo como transition: opacity 300ms o no se depende de como quieras aplicarlo pero masomenos por ahí va la idea c:

Por lo demás esta todo bien en tu proyecto no tengo nada que agregar, bien hecho.

Marked as helpful

0

P

@CharlieCastleWeb

Posted

@Sdann26 Muchas gracias Danilo! Investigando lo que me comentas he entendido que puedo aplicar diferentes transition según el efecto así que usando

transition: .5s ease, transform 0s;

ya consigo que el ojo me salga centrado al cargar. Sigo teniendo el problema de que al cargar se ve por un momento y desaparece, cuando no se debería ver hasta hacer hover. Seguiré investigando

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord