修复Buggy JQuery动画

Question

I've been trying to create a smooth hover animation using JQuery. So the idea is that when you hover over the picture both the image and the text increase in size.

However the image is kind of buggy when you hover over it and the text scrolls as you can see in the jsfiddle included. Is there anything I can do to make it smoother without the text scrolling?

Answer 1

You can use the property overflow: hidden; inside the css class .textBoxes, like this:

.textBoxes
{
    display: flex;
    flex-direction:column;
    overflow: hidden;
}