NFT preview card component by Gurpreet Singh Kalyan
Design comparison
Solution retrospective
good and first time on project CSS positioning experience
Community feedback
- @MohamedAridahPosted over 2 years ago
Hello @justcoder42022, impressive.! your solution layout is very good and almost similar to the design.
However i have some notes for you:
- instead of using
display
property to control showing and hiding of the icon on the image on hover. You can use for exampleopacity
. This will allow you to usetransition
property with it and hover will be much smoother. Sincedisplay
doesn't work with transition.
.main-image-section::after { left : 0; /* to indicate starting point horizontally */ opacity: 0; /* use opacity instead of display */ transition : opacity 200ms linear; }
.main-image-section:hover::after { opacity: 1; cursor : pointer; /* better than the default and design did that too */ }
- For
.main-image-section::after
you can usebackground
property shorthand like:
.main-image-section::after { background: hsla(178, 100%, 50%, .6) url("images/icon-view.svg") no-repeat center; }
- For
.main-image-section::after
instead of usingheight: calc(100% - 4px)
. You can just give the<img>
display : block
property and everything will work fine.
.main-image-section::after { height: 100%; }
.main-img { display: block; }
-
instead of using
strong
element inside.avtar-containter
div. You can use<a>
element. It's more **Semantic ** and on click this name this may lead to another page. Also don't forget to addtransition
for it on hover. -
using:
li { list-style: none; }
this way means you want to use it Globally. If so, it's better to put it at the beginning of the code. Optional and Your way is totally right
- you can see My solution for this challenge it may be helpful for you..!
I hope this wasn't too long for you, hoping also it was useful😍.
Goodbye and have a nice day.
Keep coding🚀
Marked as helpful1 - instead of using
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