@KTrick01
Posted
Hi! The hover effect can be make easily with an ::after or ::before pseudoelement, here is a quick demo for you using your classes:
.card__img::after {
content: "";
position: absolute;
background-color: #5bb02c70;
inset: 0;
transform: translateX(100%);
transition: .3s;
}
.card__img:hover::after {
transform: translateX(0);
}
.card__img {
overflow: hidden;
}
Try it! I hope that it helps you!
Marked as helpful
@shivaprakash-sudo
Posted
@KTrick01 Hello, That was cool to see it work!😀
But using ::after caused problems with eye icon, so I changed it to ::before and now it's working like shown in the design.
Thank you so much for helping with this.