NFT preview card component challenge

Do you mean that you didn't see it on the given design by frontend mentor or you didn't see it after you tried my solution ?

If you mean that you didnt see it on the given design, try to check it one more time on the this challenge preview site and click on active state. It does exist on the challenge.

Hello @TRIPLE-ADE, Good job on accomplishing this challenge. The NFT Card that you built is great, it is almost resemble the given design from frontend mentor.

However, I noticed there is one thing missing in your card, which is the eye logo in the middle of the card.

As the solution from me, maybe you can try this out.

1. Inside your image container (id="overlay"), put the image "eye logo".

2. set your image container (id="overlay") to position : relative

3. set the eye-logo to position : absolute. nb : from step 2 and 3, it will enable your eye logo to be anywhere you like, which the movement is based/relative to the parent container

4. Move the eye logo until it stands in the middle of your NFT-image

5. Inside the CSS, set the eye-logo image to hidden

6. Last, make sure that your eye logo as well as your your background to appear, when you hover through it.

You can write it like this : #overlay:hover img("the eye logo") { display:inline-block; }

I hope this solution can be helpful to you. Happy Coding!

@Biggboss7 Thank you sir, really appreciate 👍👍

@Biggboss7 please can you help me to preview the site again