@imadbg01
Posted
Greeting Diana Jordan! Congratulations for completing your challenge!, 👏👏👏.
they is a lot of ways to archive this overly effect, this is good resource from w3school, and also this blog post has some good information, but I did some changes to your code to make it function,
html
<div class="images">
<img src="images/image-equilibrium.jpg" alt="equilibrium" class="image-first">
</div>
css
main .images{
position: relative;
background-color: rgb(139, 213, 218);
border-radius: 10px;
z-index: 1;
overflow: hidden;
}
.image-first{
max-width: 100%;
transition: opacity 200ms ease-in-out;
}
.images::after{
content: "";
position: absolute;
background-image: url("./images/icon-view.svg");
background-position: center;
background-repeat: no-repeat;
width: 3rem;
height: 3rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
opacity: 0;
visibility: hidden;
transition: all 250ms ease-in-out;
}
.images:hover .image-first{
opacity: .2;
}
.images:hover::after {
opacity: 1;
visibility: visible;
scale: 1;
}
this implementation uses css pseudo-elements, I Hope this give you some hints or tricks after all good attempt, keep coding
Marked as helpful