HTML5 and CSS3

Solution retrospective
I'd like to know if the "overlay" method is the only way to achieve the hover effect on the image.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @pippal5536
I used the hover effect like this: html:
<img src="./images/image-equilibrium.jpg" alt="image of an equilibrium"> <div class="hover-image"> <img src="./images/icon-view.svg" alt=""> </div> </figure>
CSS:
.card-image, .card-image>img { width: 100%; border-radius: 1rem; height: 18rem; } .card-image { position: relative; } .hover-image { position: absolute; top: 0; height: 100%; width: 100%; background-color: aqua; border-radius: 1rem; display: grid; place-items: center; opacity: 0; } .hover-image:hover { background-color: hsla(178, 100%, 50%, 60%); cursor: pointer; opacity: 1; }
I hope this helps!
- @jhellard
The overlay method is a simple way to get the effect, it's even the recommended method on W3Schools so there is no harm in it. I'd say the cleanest way is probably using either the
:before
or:after
pseudo-element to avoid having another element.Here's a handy article on how to achieve that from 30secondsofcode.
Join 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