Responsive Design For NFT Card Component (HTML & CSS) Using FlexBox
Design comparison
Solution retrospective
1.I could not solve the action state for the image (overlay image).Would appreciate help regarding this
Community feedback
- @seangray-devPosted almost 2 years ago
Hey Hanzala,
Similarly to a previous comment. Here is some of my CSS for this challenge:
- Setting the parent element to position relative:
.card-top { border-radius: 15px; overflow: hidden; position: relative; } .card-top img { width: 100%; display: block; }
- And then the overlay image to take up the entire space of it's parent element while hiding it:
.img-overlay { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: hsla(178, 100%, 50%, 0.3); display: none; } .img-overlay img { position: absolute; width: 50px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
- And then to show it upon hovering:
.card-top:hover .img-overlay { display: block; }
Hopefully this helps. Keep it up! 😁
Marked as helpful1 - @Sujood-QureshiPosted almost 2 years ago
Hey Hanzala! 🙋♂️
Congratulations on completing the NFT preview card component challenge
I also got the same problem while working on this challenge. But I did manage to solve it
So here is a tip
index.html
- You can add one blank <div> element and add the <img> element with src = icon-view.svg after <img class="equilib-img" src="./images/image-equilibrium.jpg" height="250px" width="260px" alt="Equilibrium.io"> "from your code"
index.css
-
Then make position absolute of both blank <div> element and <img> element with src = icon-view.svg and make display none for both the elements
-
Give height and width to blank <div> element and then give the background color as per requirement.
-
Then update your hover effect from .equilib-img:hover{cursor: pointer; background-color: hsl(178,100%,50%);} to .equilib-img:hover .blank-div{ display: block;} and .equilib-img:hover .img-view { display: block}
You can take a look at my {NFT preview card component} solution
I hope you find it useful! May your front-end journey be filled with successful 😊😊
Marked as helpful0 - @AhmedMahroussPosted almost 2 years ago
good jop my bro Congrats on completing your first challenge!🎊🍻 you can do it by background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); If you have any questions or need further clarification, feel free to reach out to me. Happy Coding! 🎆🎊
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