如何灵活地/动态地调整图像大小

Question

我试图创建一个网站设计，其中我有一个3×3的图像网格，每当我将鼠标放在特定的图像上时，该图像的大小会比其他图像稍大一些。这种调整不应该立即发生，这将是一种流体动画，其中的高度和宽度的图像正在增加x像素每帧(同时保持高宽比)，直到达到预期的大小。

我很确定这可以在JQuery中完成，但我似乎找不到它的命令。我能找到的最接近的是JQuery尺度效应，但它将图像缩小为零，而不是动态地将其大小增加到指定的最大值。

现在假设我得到了正确的实现，当鼠标悬停在图像上时，我将如何获得脚本来单独调整图像的大小？到目前为止，我只能够一次调整所有图像的大小，如果我给出9个图像中的每一个单独的ids，我不知道如何通过脚本来修复这个问题。

Answer 1

CSS转换是您所需要的。您可以调整更改的时间，并使用它们动画任何CSS属性。

当鼠标悬停在图像上时，下面的代码将在1秒内将图像展开1/5倍。

img {
    width: 200px;
    height: 150px;
    transition: width 1s;
    -webkit-transition: width 1s;
    transition: height 1s;
    -webkit-transition: height 1s;
}
img:hover{
    width: 240px;
    height: 180px;
}

下面是一个粗略的小提琴来帮助您入门。