Skip to content
Submitted almost 3 years ago

React js library

Gichure Maina•10
@KyleGichez
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

Hello, my fellow developers, I hope you are doing fine. I have completed this project challenge using React library. However, I have encountered a problem with the hover effect on the image component. I have used the ":hover" CSS pseudo-class but the image does not respond according to the CSS property that I have provided in the styling. I am hoping that I will get help on how to go about solving this challenge. Any code reviews about my participation in this challenge are highly appreciated. Thanks in advance !!

Community feedback

  • Nitin Kumar Pandey•60
    @nitskpPosted almost 3 years ago

    I solved the same question, today. For the image hover effect, I superimposed a div blue in colour over the image. Using z-index when you hover, the blue div comes to the front along with the eye SVG. The transparency is set so the image becomes a bluish colour and is visible.

    Live Site

    Code

    Marked as helpful
    0
    Gichure Maina•10
    @KyleGichezPosted almost 3 years ago

    @nitskp

    Thank you so much for your help.

    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