Design comparison
Solution retrospective
Hi All, any for of a feedback towards my solution is highly appreciated.
Community feedback
- @hitmorecodePosted over 1 year ago
Nice well done. Just a few tips
- You forgot to add the overlay and show it on hover
- You have flexbox on the body and you have margin on the container. You can remove the margin on the container, flexbox is already keeping the card in the middle of the page
Marked as helpful0@KeoLamolaPosted about 1 year agoHi @hitmorecode , Much appreciated. I honestly missed the part of hovering. Will work on it .
0 - @F4YYPosted over 1 year ago
Hi @OekPhlesym,
Congratulations on successfully completing the challenge, you did very well...
There is improvement room to make it closer to the given design. Which is appearance of the
eye icon
overlaying above the equilibrium image when hovering. You can set overlay component and make its absolute position, also set relative position of the image container.Then insert it in HTML & CSS, the code snippet could be like this, you might adjust it as you like:
in HTML:
<div class="avatar"> <img src="images/image-equilibrium.jpg" alt="preview"> <img src="images/icon-view.svg" class="overlay" /> </div>
in CSS:
.avatar { display: flex; position: relative; justify-content: center; align-items: center; height: 60%; width: 100%; } .overlay{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; } .overlay: hover{ opacity: 1; background: hsl(178, 100%, 50%, 0.5); }
Hope that could be Helpful. Keep happy coding...
0@KeoLamolaPosted about 1 year agoHi @F4YY Thank a lot for your fora your input. I will sure make changes as well research more to fully grasp the concepts. Thanks
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