Responsive NFT Preview Card

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 👌