Skip to content
Submitted almost 3 years ago

NFT preview card almost perfect (I think)

Christopher Schubert•20
@LordShogu
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

2nd challenge for me so far and this one went way better than my 1st. only took me maybe 4ish hours, and the last hour or so was me trying to figure out why I couldn't hover over the equilibrium image and make it transparent and cyan. I figured making it clickable might do it, or adding the color as a background color and changing the z-index on hover might work but to no avail. If anyone could point me in the right direction, that'd be great, Thanks all!!

Community feedback

  • Alessio Maddaluno•200
    @AlessioMaddalunoPosted almost 3 years ago

    In order to get that effect you have to use the "position" css property for creating the overlay over the div that contains the image. If you have a container with a css property position:relative, you can put your overlay inside it and make it cover all the container (using the position:absolute and adjust it). Then you can set the level opacitiy to 0 the make it disappear and play a bit with the hover propery to make it appear it again when your cursor is over the container itself.

    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