Skip to content
Submitted over 1 year ago

NFT Preview Card using Vanilla HTML/SCSS

ilyemm•140
@ilyemm
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I've been doing Vanilla HTML/CSS for the previous attempts, so I wanted to start learning how to use SCSS to start getting a handle on using more modern ways to write CSS. I ended up really like SCSS since I have a habit of repeating setting CSS properties and not wanting to clean it up after finishing the design, but with SCSS, everything is a lot more condensed and is a lot easier to look through the code.

One thing I did have trouble was keeping the eye view image's opacity at 1 when the hover happens. Any help with that would be appreciated as well as any general feedback with SCSS going forward. Thanks! :)

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    SUGGESTIONS 💡 :

    • The .overlay element is just transparent when user hovers the cursor on the image, but the transparency setted for element .overlay also affects it child view-icon's opacity.
    • We can resolve this easily by optimizing the css rules, now add the following rules
    .container-img:hover .overlay {
  opacity: 1;
}

.overlay {
  background-color: hsla(178, 100%, 50%, 50%);
  transition: 250ms ease-out;
}
    • Explanations for suggestions, we provided opacity: 1 and we have modified the opacity of background-color with the help of hsla color code. So our view-icon will have 100% of opacity.
    • And we add transition from .container-img:hover .overlay to .overlay for hovering state. an important note to remember is we want to add transition on it's normal first then the transition will work out it's triggered state like :hover
    • Because of when we add transition for .container-img:hover .overlay the transition will apply for starting but when :hover state is false then the transition will not work suddenly it will hidden

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    1
    ilyemm•140
    @ilyemmPosted over 1 year ago

    @0xAbdulKhalid This was very helpful! Thank you for the feedback :)

    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