Responsive NFT Preview Card

Community feedback

• 

  P

  Luca Liebenberg•180

  @lucaliebenbergPosted over 1 year ago

  Hey @kingchoffy,

  To achieve the hover effect, you need to put a <div> below the image, and wrap the image and the <div> in another <div>, an example would be:

  <div className="card__container"> <img src="NFTImage" alt="card image" /> <div className="overlay"></div> </div>

  You then need to make the overlay <div> position:absolute and the image position:relative. This will remove the overlay <div> from the DOM. Set top:0 and left:0, this will make the overlay <div> appear on top of the image.

  Here is an example of how I achieved it the end goal:

  .card__top_wrapper { position: relative; } .card__top_image { position: relative; margin-top: 1rem; height: 302px; width: 302px; } .overlay { position: absolute; height: 302px; width: 302px; background-color: white; opacity: 0; border-radius:10px; top: 0; left: 0; margin-top: 1rem; transition: all 0.2s ease-in-out; } .overlay:hover { background: radial-gradient(50% 50% at 50% 50%, rgba(0, 255, 248, 0) 0%, #00FFF8 100%); opacity: 50%; cursor: pointer; }

  I hope this helps. For other hover effect - where it changes to Equilibrium #number on hover, you will need to:

  Write the NFT number in a <p> element, and within that <p> element you must place a <span> element, like so:

  /* html */ <p><span className="extra">Equilibrium </span>#3117</p>

  /css/ .extra { display: none; } p:hover .extra { display: inline-block } Note: you probably will be able to do it with display: inline-flex, instead of inline-block.

  I hope this helps 👌

  Marked as helpful

  0

  ---

  

  kingchoffy•80

  @kingchoffyPosted over 1 year ago

  @lucaliebenberg Hello thank you for taking the time out to reply. from the example you provided i was able to get it to work :), it was helpful.

  although i had to make some changes to make the overlay fit on the div, i messed around with the top and left property.

  0

  

  P

  Luca Liebenberg•180

  @lucaliebenbergPosted over 1 year ago

  @kingchoffy i'm glad it helped!

  0