Design comparison
Solution retrospective
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Community feedback
- @danielmrz-devPosted 8 months ago
Hello @Xarlizard!
Your project looks great!
It's quite a challenge to add that hover effect with the overlay image properly. Here's how you can do it:
HTML
<img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic"> <div class="icon"> <img src="images/icon-view.svg" alt="icon-view" class="icon-view"> </div>
CSS
.pic { width: 300px; background: url('images/icon-view.svg') center center no-repeat; background-color: $Cyan-hover; background-size: cover; margin: auto; border-radius: 10px; } .icon { display: grid; justify-content: center; align-items: center; position: absolute; opacity: 0; background-color: $Cyan-hover; width: 300px; height: 300px; border-radius: 10px; } icon:hover { opacity: .5; cursor: pointer; }
Just don't forget to change the class names to match yours.
I hope it helps!
Other than that, you did an excelent job!
Marked as helpful2@XarlizardPosted 8 months ago@danielmrz-dev eyoo Daniel my man! 👋😄
To be honest, I hadn't realised that I completely missed the hover effects until you pointed it out, so thanks again for that! 😅👉👈
You've already helped me with my projects 3 days in a row, you're gonna become my true frontend mentor at this rate 🙌
Again, thanks for your time and explanations, between this page and this community support (= you), I'm learning frontend on steroids lol 🤗
0 - @0xabdulkhaliqPosted 8 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
CSS 🎨:
- Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using
margin
orpadding
.
- We don't need to use
margin
andpadding
to center the component both horizontally & vertically. Because usingmargin
orpadding
will not dynamical centers our component at all states
- To properly center the component in the page, you should use
Flexbox
orGrid
layout. You can read more about centering in CSS here 📚.
- For this demonstration we use css
Grid
to center the component.
body { min-height: 100vh; display: grid; place-items: center; }
- Now remove these styles, after removing you can able to see the changes
.card { margin: auto; margin-top: 7%; }
- Now your component has been properly centered
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
1@XarlizardPosted 8 months ago@0xabdulkhalid hey man, thanks for your help!
As you just pointed out, using Grid was the best approach to correctly centering the content.
Happy coding to you too! 😄
1
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