Skip to content
Submitted almost 3 years ago

Responsive Card Component with Active states using CSS grid

Ty•70
@ItsIchi
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

Two challenges I ran into was first the HR I couldn't figure out how to get it anymore thin, and the second was the active state for the image I ended up just creating an overlaying div that acted as the hover state but if there's a better or more simple way to do so let me know!

Community feedback

  • Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    To avoid accessibility issues in the future, wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here

    Good job :)

    Marked as helpful
    0
  • Mark Cates•110
    @mscatesPosted almost 3 years ago

    for the opacity, you can wrap the image in a container and give it a background color and then when you hover over the container img:hover like this, you can use the mix-blend-mode: multiply with an opacity of say .6 and you can get the hover effect like on the design. here is some sample code to see how it works.

    <div class="example"> <img src="/images/image-equilibrium.jpg" alt="equilibrium" /> </div>

    .example { background-color: $primary2; height: 300px; border-radius: 10px; } .example img { max-width: 300px; width: 100%; border-radius: 10px; }

    .example img:hover { opacity: 0.6; mix-blend-mode: multiply; border-radius: 10px; transition: 0.5s ease; cursor: pointer; }

    Marked as helpful
    0
  • Fabricio Rivera•90
    @FabricioRivera2021Posted almost 3 years ago

    I ran into trougles with the hover image too, dont know if its a better way but i lower the opacity of the image in the hover, and put cyan on the container of the image and show the eye with a background image.

    0

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