@danielmrz-dev
Posted
Hello @XenoMee!
Your project looks great!
I see that you didn't add the hover effect on the image and it's indeed quite a challenge to create it properly. Here's how you can do it:
HTML
<img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic">
<div class="icon">
<img src="images/icon-view.svg" alt="icon-view" class="icon-view">
</div>
CSS
.pic {
width: 300px;
background: url('images/icon-view.svg') center center no-repeat;
background-color: $Cyan-hover;
background-size: cover;
margin: auto;
border-radius: 10px;
}
.icon {
display: grid;
justify-content: center;
align-items: center;
position: absolute;
opacity: 0;
background-color: $Cyan-hover;
width: 300px;
height: 300px;
border-radius: 10px;
}
icon:hover {
opacity: .5;
cursor: pointer;
}
Just don't forget to change the class names to match yours.
You can also add the hover effect on the title h1
as well as the name of the person.
I hope it helps!
Other than that, you did an excelent job!
Marked as helpful
@XenoMee
Posted
Thanks @danielmrz-dev!
I often forget to add hover/active effects on the elements after I finish the design. I just implemented the changes for the active states right now.
I approached it in a different way to achieve the desired outcome. You can check out the code to see my version.
Thanks again for the heads up!😊