Question

我通过悬停效果调整图片大小

<img id="image" src="https://www.google.com/images/srpr/logo11w.png" align="middle" alt="Img1"/>

#image{
    height:50px;
    -webkit-transition: height 2s;
    transition: height 2s;
}

#image:hover{
    height:100%;
}

JSFIDDLE

我应该如何调整代码以使用渐变动画进行转换？

Answer 1

尝试规模转换：

CSS：

#image {
  height: 50px;
  transition: all 0.2s;
}

#image:hover {
  transform: scale(2);//Can be any value
  transition: all 0.2s height: auto;
}

演示：http://jsfiddle.net/nwxutpvs/2/

Answer 2

首先，当您尝试将平滑过渡应用于其height时，您只对图像应用了width个值。使用height或all进行转换。

其次，您尝试制作新的图像高度100%。现在，100％的是什么？指定固定高度（以像素为单位），或将其放在具有固定高度的容器中。

所以要么：

＆＃13;

#image {
    height: 50px;
    -webkit-transition: height 2s; /* Safari */
    transition: height 2s;
}
#image:hover {
    height: 100px; /* Height set in a fixed unit such as pixels */
}

＆＃13;

<img id="image" src="https://www.google.com/images/srpr/logo11w.png" align="middle" alt="Img1"/>

＆＃13;

或者将图像包装在具有固定高度的容器中：

＆＃13;

.container {
  display: block;
  width: 400px;
  height: 200px;
}
#image {
    height: 50px;
    -webkit-transition: height 2s; /* Safari */
    transition: height 2s;
}
#image:hover {
    height: 100%;
}

＆＃13;

<div class="container">
    <img id="image" src="https://www.google.com/images/srpr/logo11w.png" align="middle" alt="Img1"/>
</div>

＆＃13;

Answer 3

我认为你想要CSS过渡。尝试这样的事情：

#image{
    height:50px;
    transition: height 2s; // specify property and duration
}

#image:hover {
    max-height: 500px; // new height
    transition: linear; // evenly timed transition
}

如何通过CSS3

3 个答案: