On my webpage, I have implemented an image that zooms in slightly when hovered over. Unfortunately, this animation has caused the image to only display one part regardless of whether hover is activated or not. I've attempted to troubleshoot by adjusting margins, padding, and positions but have had no luck so far. The code was added within a Bootstrap 4 environment, which may be playing a role in the issue.
If anyone can provide guidance on how to correct this problem without completely removing the hover effect, it would be greatly appreciated!
For reference, here is the Codepen link: https://codepen.io/amandathedev/pen/zyEyze
Below is the relevant section from the CSS:
.imgBox {
float: left;
position: relative;
width: 640px;
height: 360px;
margin: 0 auto;
/* justify-content: center;
display: inline-block; */
overflow: hidden;
}
.imgCard {
position: absolute;
top: 0;
left: 0;
}
.imgCard img {
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}
.imgBox:hover .imgCard img {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}