@imadbg01
Posted
Greeting Abdulhafeez Ibrahim!! Congratulations for completing your challenge, 👏👏👏.
they are many ways to archive that overly effect , One of the simplest ways is using CSS properties and pseudo-elements.
for example you will need the following, a wrapper
an image
and icon
as a decorative element
HTML
<div class="image-wrapper">
<img class="eth-img" src="images/image-equilibrium.jpg" alt="Equilibrium image" >
</div>
CSS
.image-wrapper {
position: relative;
background-color: hsl(178, 100%, 50%);
/* ... */
}
.eth-img {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
/* ... */
}
.image-wrapper::after {
content: url(images/icon.svg);
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: .5s ease;
}
.image-wrapper:hover .eth-img{
opacity: 0.3;
}
.image-wrapper:hover::after {
opacity: 1;
}
you can check out this resource to learn more.
- https://dev.to/ellen_dev/two-ways-to-achieve-an-image-colour-overlay-with-css-eio
- https://www.w3schools.com/howto/howto_css_image_overlay.asp
- https://imagekit.io/blog/css-image-overlay/
Hope this helps and give you some hints.
Overall, Welcome to Frontend Mentor Community, and keep coding 👍.
Marked as helpful