Looking to hire developers?
hello,
I used :before Selector to change the color of image on hover. This is my updated solution, before i used two containers to change the color of image.
please give feedback!!
happy coding..!!
@ArturoFLR
Posted
Thank you! It´s a very elegant and simpler solution, with fewer containers. I'm on it.
Two suggestions:
Change the opacity directly on the background color, so it doesn't affect the icon.
Put a border-radius on .originalImage. Now it´s completely square.
Thanks again!
@ArturoFLR
Posted
Hello!
I have also used the same image in both containers so that they have exactly the same size without having to give specific sizes to the height and width.
I have seen other solutions and I have not found any that do not give specific sizes.
It would be very interesting if someone has found another solution.
@thapa14
Posted
@ArturoFLR Hello..
I have a different solution to achieve this.
We can use :before Selector to change the color of the image.. here is the solution ..
**this is html **
<div class="card__image">
<div class="originalImage">
<img src="./images/image-equilibrium.jpg" alt="img">
</div>
</div>
and this is its CSS
.card__image{
width: 100%;
border-radius: 1rem;
cursor: pointer;
position: relative;
}
.originalImage{
width: 100%;
}
.originalImage img{
width: 100%;
border-radius: 1rem;
}
.originalImage::before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: var(--cyan) url(./images/icon-view.svg)no-repeat center center;
opacity: 0.6;
visibility: hidden;
}
i have uploaded my solution please see it there and provide your feedback.
Happy coding...!
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
