When my images are hovered on, I want them to stay within the container without overflowing, which is why I have used overflow: hidden. However, the issue is that it causes the bottom of the container to expand and interfere with the content below. How can I prevent this from occurring?
.image-hover-container {
width: 50%;
border-radius: 3px;
overflow: hidden;
display: block;
margin: 0 auto;
margin-top: 20px;
transform: translate3d(0,0,0);
}
.inner-container img {
width: 100%;
border-radius: 3px;
transition: all .4s ease-in;
}
.image-hover-container img:hover {
transform: scale(1.1,1.1);
}
p {
text-align: center;
font-family: arial;
}