Skip to content
Submitted over 2 years ago

NFT preview card component using HTML, CSS

Mark Escosura•70
@mark-escosura
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

How do I make the view icon color a lot more visible when you hovered into it?

Also, please let me know if there are other areas I can improve on. Thank you!

Community feedback

  • Danilo Blas•6,300
    @Sdann26Posted over 2 years ago

    Hi Mark!

    You could do the effect by leaving the opacity at 1 on the hover but changing the background in this way:

    hsla(178.1, 100%, 50%, 0.5);

    The value 'a' (alpha) is to give it opacity so if you set it like this you can achieve it.

    The rest I see it quite well done.

    Marked as helpful
    1
    Mark Escosura•70
    @mark-escosuraPosted over 2 years ago

    @Sdann26 Wow! Such a helpful CSS function! This is great for situations where values need to be changed. I'm gonna keep this property in mind when doing hover effects! 😁

    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