Design comparison
SolutionDesign
Solution retrospective
I find it difficult to place the view picture and make hover property work with it. Thank you
Community feedback
- @Zy8712Posted 12 months ago
In order to add the active hover state you need to add a "curtain" over your image for it to work. What I did was something along the lines of:
For the HTML:
<div class="image-div"> <img src="./images/image-equilibrium.jpg"> <div class="curtain"></div> <img src="./images/icon-view.svg" alt="" class="curtain-icon"> </div>
For the CSS:
.image-div img { max-width: 100%; height: auto; display: block; } .curtain { background-color: var(--Cyan); width: 100%; height: 100%; position: absolute; opacity: 0%; transition: opacity 0.25s; } .img-div:hover .curtain { opacity: 50%; } .curtain-icon { position: absolute; inset: 0; margin: auto; opacity: 0%; transition: opacity 0.25s; } .img-container:hover > a > .view-img { opacity: 100%; }
This is mainly done using the :hover effect. Most of this css is just setting up the curtain's appearance. Hope you find this useful 👍
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