Design comparison
Solution retrospective
this is maybe view img postion absolutely hover no idea thank you feedback :)
Community feedback
- @danielmrz-devPosted 8 months ago
Hello @578shivam!!
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 helpful0 - @Bishalsnghd07Posted 8 months ago
Hi, @578shivam 👋
Congrats for completing this challenge 🎉 and amazing work👏
There, is a few adjustments needed in the semantic as well as in CSS basics:
1)Never, forget to give
min-height
in body of your web page, if you did not doing this, your main layout of web page will take the height of your given child components. So, it gives disaster solution sometime, your layout may break also. Smaller project it is not effecting, but when you work with larger project there will be many component, in there if you did not give min-height in your body tag then your layout will break. For Example: If your First component havingheight: 40vh
and your last component havingheight:90vh
. So, in this case, your layout size will be showing 90vh, but actual size of layout is 100vh and due to giving this height in child component only, your layout will take 90vh and original height of layout is 100%(100vh). In this case your layout will break, what you will be done in that, that's why it is good practice to givemin-height:100vh
in body of your web page.2)Heading levels are like this👉
h1, h2, h3, h4, h5 & h6
. Always follow the heading levels, never use h2 directly without using h1,<h1>
is the most important and<h6>
will be least important. And h1 should be used only once in one project and it will be the main header of your component. By doing this your semantic HTML will improved and code quality too.Other than that great job and hope this tips will help you ahead in your projects too!
Happy Coding❤️
Marked as helpful0
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