Design comparison
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
- @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 childview-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 ofbackground-color
with the help ofhsla
color code. So ourview-icon
will have100%
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 addtransition
on it's normal first then thetransition
will work out it's triggered state like:hover
- Because of when we add transition for
.container-img:hover .overlay
thetransition
will apply for starting but when:hover
state is false then thetransition
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 helpful1@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 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