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

Hover state with animations

Rynex Akil 100

@rynex-zv

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 made a @media (hover: hover) why i still need to add :hover after each element? I thought that If i add it all the classes in it will have hover applied?

Community feedback

@VCarames

Posted

Hey @rynex-zv, great job on this project!

Regarding you question.

The @media (hover: hover) just lets the browser know whether the screen is capable of using hover effects, regardless of screen size. For example, some Samsung devices can use stylus which allow for hover effects, even though they are small screens. On the other hand, iPhones aren't capable of hover effects.

Heres a good link that explains more in detail: https://dev.to/jackdomleo7/media-hover-hover-css-media-query-5bge

Happy Coding!

Marked as helpful

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