NFT preview card component
Design comparison
Solution retrospective
Hello, Frontend Mentor community! This is my solution to the NFT preview card component.
I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
Community feedback
- @denieldenPosted almost 3 years ago
Hi Catherine, very good job!
I see that in the
:hoverstate of the image the eye is not at full opacity.To solve you could insert the eye through an
imgtag centering it throughflexboxinside the div with class.color-imageand making it visible only in the:hoverstate.After, in
.color-imageyou have to removeopacityand put the color throughrgba:background-color: rgba (0, 255, 247, .5);Happy coding :)
Marked as helpful0@catherineisonlinePosted almost 3 years ago@denielden thanks for the tip
1@denieldenPosted almost 3 years ago@catherineisonline You are welcome! And don't forget to mark my comment as helpful ;)
Thank you and Happy coding :)
0 - @byronbyronPosted almost 3 years ago
Looks really good!
Might need a
border-radiusandoverflow: hiddenon the image to get the rounded corners, especially when hovering over it./** Container Image **/ .container-image { position: relative; cursor: pointer; width: 100%; height: auto; border-radius: 0.5rem; overflow: hidden; }Also, if you give the image a
display: block;, it should get rid of the slight lip of space below the image, which is noticeable on hover..main-image { position: relative; height: auto; width: 100%; border-radius: 5px; display: block; }Nice job 👍
1@catherineisonlinePosted almost 3 years ago@byronbyron Thanks for the feedback!
0 - @Olli1989Posted almost 3 years ago
Hello,
a hover transition would be nice, it would be much smoother.
At the smallest size of the browser you have side scrolling.
If you resize the browser you are jumping between sizes, thats because of your media querries.
Besides these small things it looks great.
I hope i could help.
1@catherineisonlinePosted almost 3 years ago@Olli1989 Thank you! Definitely helpful!
0 - @Prithvi12890Posted over 2 years ago
Hello Catherine!
The styling looks amazing and the comments in your CSS & HTML file make it easier to read and understand too. The transition is smooth too.
A small suggestion to match the design, even more, you can try changing the hover state of the card's image as below to match with the active state design:
.color-image:hover { background-color: var(--cyan); opacity: 0.5; }to.color-image:hover { background-color: hsla(178, 100%, 50%,0.5); opacity: 1; }i.e., instead of giving the whole hover thing an opacity of 0.5, we can give just the background an opacity of 0.5 using hsla() for cyan color so that the eye-svg does not get that opacity and its true color is shown.
And even, changing the font-weight of the card title to 600, card description, and time left to 300 if you are particular about matching the design weights 😄
The whole card style looks amazing and even your way of writing the HTML and CSS (with comments, and proper indentations) is really good and easily understandable.
Great Styling!
0@catherineisonlinePosted over 1 year ago@Prithvi12890 Noticed a little bit late but thank you for your time anyway!
0 - @iamindikaPosted almost 3 years ago
I just finished this challenge myself. Playing with the background properties to overlay images and your use of css custom properties was pretty cool. Can't wait to try them out myself! Keep at it!
0 - @Lcs7rPosted almost 3 years ago
Hi, good job ! Just a little tip, put "transition: background-color ease-in-out 0.3s;" not on the "color-image:hover" element but direclty into ".color-image". The transition when you take off your mouse of the image would be better.
0 - @shahidkhan6Posted almost 3 years ago
It took me almost 2 hours to fix the same issue that u have here . Issue: the view-icon fades with hover effect! solve it by changing overlay opacity to 1 instead of half(or whatever u used), and search for how to give it a half opacity background on hover :)
0 - @Hyuuga81Posted almost 3 years ago
Nice job. I really like that transition on mouseover. It really makes it better to look at. I may borrow that :). Keep it up.
0@catherineisonlinePosted almost 3 years ago@Hyuuga81 thank you! means a lot
0 - @Julian17xdPosted almost 3 years ago
Hola, estoy realizando este desafío pero no he podido avanzar porqué no sé como sobreponer la imagen "view" sobre la imagen "equilibrium" al momento de hacer hover sobre la imagen. Te agradecería si me recomiendas algún vídeo el cual de solución a mi problema, no importa si el vídeo está en inglés. Gracias
0@catherineisonlinePosted almost 3 years ago@Julian17xd Hola, no conozco ningún video para recomendarte. Puedes revisar mi código en Github y usarlo como ejemplo
0@Julian17xdPosted almost 3 years ago@catherineisonline Gracias, haré lo que dijiste
0@catherineisonlinePosted almost 3 years ago@Julian17xd Espero que ayude
0 - @intherightdirectionPosted almost 3 years ago
Hi, Looks good. Just a little confused by your width changes in the media queries. Would a 'max-width' do what you are looking for? Seems like you want to manage the width at different screen sizes. With max-width you wouldn't need to write a bunch of media queries to overwrite each other.
0@catherineisonlinePosted almost 3 years ago@intherightdirection didn't really try that way :D Thank you for the feedback, definitely going to try that way
0 - @vishwa3Posted almost 3 years ago
Found your solution a bit easy to understand compared to others , referred your solution to implement hover state for image
0@catherineisonlinePosted almost 3 years ago@vishwa3 thank you for the feedback. Glad the solution was useful
0 - @mishrahatPosted almost 3 years ago
That's great! You also skipped the background part of the card as I did. It's really subtle. Good work.
0@catherineisonlinePosted almost 3 years ago@mishrahat Thank you for the feedback!
1 - @codezelossPosted almost 3 years ago
Hello Catherine !! There just a need to add some small details in your code, especially in green part(eth sold) & deadline time. Which is [align-items] declaration, in order to have elements aligned in the same line as there icons. Have a nice day, good luck in your Dev journey.
0@catherineisonlinePosted almost 3 years ago@elosscode Thank you for the feedback!
0 - @MuhammadM1998Posted almost 3 years ago
Good job catheriene. the container-details div need less margin-bottom and the overlay need to be a little lighter but it looks great. I noticed that your report has 0 issues and I always have issues such as the html should include the lang = "en" although I do have it in my code, I hope you can help me with this.
0@catherineisonlinePosted almost 3 years ago@MuhammadM1998 Thank you for the feedback. I didn't try to solve that issue yet as I also had it in my very first projects. It looks like some kind of bug. When I started solving other issues in my next project the language one disappeared itself. I didn't change anything regarding this.
0@MuhammadM1998Posted almost 3 years ago@catherineisonline Thanks for replying. I guess I'll have to wait for it to disappear on it's own too. Good luck and keep up.
0@MuhammadM1998Posted almost 3 years ago@catherineisonline Checked out my last challenge and indeed all the fake problems disappeared. I had only one problem which did really exist after checking my code. Thanks again.
0@catherineisonlinePosted almost 3 years ago@MuhammadM1998 yes, I was looking into it just now and I had an issue with choosing the right heading but in the description, it showed me a language issue. Just read the title of the problem so it makes more sense
0@MuhammadM1998Posted almost 3 years ago@catherineisonline yeah will do that fron now on
0 - @Kamasah-DicksonPosted almost 3 years ago
The color of the overlay is very deep make it light, I mean change the opacity. Good Job!
0 - @gccavalheiroPosted almost 3 years ago
Good work! a fine tuning tip if you want to do it...
in your
<div class="container-image">add the following properties in css:border-radius: 5px;,overflow: hidden;andline-height: 0;you can remove the "border-radius" from your tag
<img class="main-image" />the code I indicated will make the children respect the format of the parent div(container-image) with this both its overlay and the image have rounded edges, the "line-height" will make its image and its overlay have a better framing, thus removing that difference in sizes that is at the bottom, "a small space"
0
Please log in to post a comment
Log in with GitHub
Join 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