Skip to content
Submitted about 2 years ago

Hover state with animations

Rynex Akil•100
@rynex-zv
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

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

  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    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

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