如何使图像在悬停时同时向上动画和向下动画？答案

【问题标题】：How do I make images animate upwards with text animating downwards at the same time on hover?如何使图像在悬停时同时向上动画和向下动画？
【发布时间】：2013-12-08 00:03:51
【问题描述】：

我有这两张带有相应标签的图片：http://jsfiddle.net/Fdjtc/

我想这样当我将鼠标悬停在其中一个 div 上时，图像向下动画，文本（最初不可见）向下动画并淡入完全不透明状态，使图像和标签看起来像现在一样。如何确保图像向上有足够的空间来执行此操作，我可以使用 CSS3 的 transition 进行这种动画吗？

【问题讨论】：

我尝试在图像上使用position: absolute，在img 上设置top: 0.5em，在img:hover 上设置top: 0。它确实适用于图像，但我不确定如何以这种方式处理文本，因为我需要硬编码图像大小（我不想这样做）。一定有一些更优雅的方式，也许有边距之类的。
你的意思是这样的吗？ Fiddle.
@mdesdev：不。最初，图像应该在 div 中垂直居中。将鼠标悬停在上方时，应将图像向上推，将文本向下推，使其看起来像我的小提琴。

标签： html css animation transition

【解决方案1】：

您是否正在寻找这样的东西：

http://jsfiddle.net/Fdjtc/9/

有几种方法可以做到这一点。此示例使用绝对定位和顶部/底部过渡。

CSS：

div.wrap > img {
    display: block;
    position: absolute;
    width: 200px;
    top: 20px;
    left: 20px;
    -webkit-transition: top 500ms;
}

div.wrap:hover > img {
    top: 5px;
}

div.wrap > span {
    display: block;
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-transition: bottom 500ms;
}

div.wrap:hover > span {
    bottom: 2px;
    opacity: 1;
}

编辑：（在您的动态尺寸请求之后）

这是另一种方法，使用边距。文字说明在这里有点问题，但你会明白的。

更新小提琴：http://jsfiddle.net/Fdjtc/11/

CSS：

div.wrap {
    float: left;
    text-align: center;
    margin: 4px;
    border: 1px solid gray;
}

div.wrap > img {
    display: block;
    text-align: center;
    margin: 16px;
    -webkit-transition: margin-top 500ms;
}

div.wrap:hover > img {
    margin-top: 2px;
}

【讨论】：

当然！从来没有想过使用底部的文字。谢谢！
宁愿摆脱<span>，但我想你无法得到这个世界上的一切......
:) 是的。这种方式很简单。否则你可能不得不进行很多黑客攻击，这会使你的干净代码变得一团糟。
等等，我刚刚意识到，如果不对大小进行硬编码，这是行不通的。有什么方法可以不这样做吗？
你能处理百分比吗？此方法适用于定义的宽度/高度，因为图像绝对定位于相对 div。至少图像可以在这里按百分比工作，因此您无需固定图像大小。更新小提琴：jsfiddle.net/Fdjtc/10

【解决方案2】：

根据您写的内容，我为您想出了这个： http://jsfiddle.net/Fdjtc/6/

我也对你的 html 做了相当大的改动：

<div>
    <img src="http://placekitten.com/256">
    <span>Label 1</span>
</div>

希望这是您想要的，如果不是，请扩展您的问题并更具描述性。

【讨论】：

【解决方案3】：

这是你想要达到的目标吗？

.box img
{
    -webkit-transition:all 0.5s ease-in-out;
    height:200px;
    display:block;
    margin-top:-200px;
}
.box:hover > img
{
    margin-top:0px;
}

http://jsfiddle.net/4BtcR/

【讨论】：