jquery - 使用所有其他div常量在div中缩放图像

我有一个带图片的div，周围还有其他几个div。现在，我对图像进行了动画处理，但它会将其下面的内容移位。有什么办法解决吗？

这是我有done的演示。我希望缩放移动图像而不影响较低的div。

我正在使用的javascript是：-

<script>
$(document).ready(function() {
    $('.itemDisplay').mouseenter(function(e) {
        $(this).find('.itemimgWrap').children('img').animate({ height: '135', left: '-20', top: '-20'}, 100);
    }).mouseleave(function(e) {
        $(this).find('.itemimgWrap').children('img').animate({ height: '120', left: '0', top: '0'}, 100);
    });
});
</script>

最佳答案

如果要避免图像超出文本，则需要将图像容器设置为120px和overflow:hidden；）

.itemimgWrap{
   overflow: hidden;
   height: 120px;
}

您可以使用CSS3进行动画处理（但我仍然建议使用Jquery）：

.itemimgWrap img {
    transform: scale(1);
    transition-timing-function: ease-out;
    transition-duration: 500ms;
}
.itemimgWrap img:hover{
    transform: scale(1.5);
    transition-timing-function: ease-out;
    transition-duration: 500ms;
}