Responsive NTF card design to you start publish your NFT's :)
Design comparison
Solution retrospective
I didn´t get the box shadows from the solution design only because I didn´t like the final aspect of the card, although if you check my code and see some incorrect practices tell me :)
Community feedback
- @danielmrz-devPosted 11 months ago
Hello @ricardodcc!
Your project looks great!
About the hover effect, here's how you can do it:
HTML
<img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic"> <div class="icon"> <img src="images/icon-view.svg" alt="icon-view" class="icon-view"> </div>
CSS
.pic { width: 300px; background: url('images/icon-view.svg') center center no-repeat; background-color: $Cyan-hover; background-size: cover; margin: auto; border-radius: 10px; } .icon { display: grid; justify-content: center; align-items: center; position: absolute; opacity: 0; background-color: $Cyan-hover; width: 300px; height: 300px; border-radius: 10px; } icon:hover { opacity: .5; cursor: pointer; }
Just don't forget to change the class names to match yours.
I also added a cursor: pointer; for the user to know that the image is clickable.
I hope it helps!
Other than that, you did a great job!
Marked as helpful0 - @ricardodccPosted 11 months ago
Now I realize that I could used padding properties to center the content of my card instead of using the margins as I did. I will update my code now.
0
Please log in to post a comment
Log in with GitHubJoin 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