Solution NFT preview card with Flex and Grid - By IsNeonPlay

Your solution is great. However, regarding the hover effect, you can improve it using the follwing steps:

1. Set the position of the image as relative.

2. Set the position of the overlay as absolute.

3. The overlay element should take the whole width and height of the the overlaid element. This achieved by the following: .nft-img-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; border-radius: 12px; background-color: hsl(178, 100%, 50%); opacity: 0; transition: opacity 0.5s; }

4. And finally for centering the eye icon inside the overly I used the following: .nft-icon-view { position: absolute; opacity: 0; top: 42.5%; left: 42.5%; } 4.1. I used positioning with the icon because I did not want the opacity of the overlay to affect the eye as well. For more information on overlaying visit the following link: Image overly icon

• Your solution looks great and very closer to the design .
• It also looks great on mobile and text are also readable.

What I have for you is that flex box and Grid are very necessary in making responsive design so don't worry about when to use them.

Besides good job there 👍👍 Happy coding👍💻

Hi, there. That looks great! I think what you should do first is center the card no matter what screen size. Add these on your body: display: grid; place-items: center; It will keep your card in the center in both x and y directions. Also, set min-height: 100vh in your body. Check out my solution and code if you want to. Good luck!