In my project, I have an image inside a card layout and I am working on implementing a zoom effect on mouseover. However, I am facing an issue where during the animation, the image overflows from its parent wrapper. After the animation is completed, the overflowed area is hidden and the zoomed image is displayed.
Here is the HTML code:
<div class="card-columns">
<div class="card">
<div class="image-wrapper">
<img class="card-img-top img-fluid" src="image-url" />
</div>
<div class="card-body">
card body ...
</div>
</div>
</div>
And the CSS code:
.image-wrapper{
width : 100%;
overflow : hidden;
display : block;
}
.card-img-top{
transition: all .3s ease-in-out;
}
.card-img-top:hover {
transform: scale(1.5);
}