CSS:图像悬停过渡不工作与显示无/显示:块和图像交换

Question

我想为鼠标悬停添加一个简单的混合图像过渡。悬停本身工作良好。如果我删除display:none，过渡将工作，但悬停图像交换将崩溃。有什么办法解决这个问题吗?

下面是我使用的CSS:

div.effect img.image{

opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
    display:block;
}
div:hover.effect img.image{
  opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:none;
}
div.effect img.hover{
  opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
  display:none;
}
div:hover.effect img.hover{     
display:block;
 opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}

这里是直播(不工作)的演示玩:http://jsfiddle.net/46AKc/65/

Answer 1

假设所有图像的高度相同，您可以在父元素上设置固定的高度，然后对其进行相对定位。

.effect {
    position:relative;
    height:94px;
}

绝对定位img元素并删除display:none。

div.effect img.image {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    position:absolute;
}

这样做的原因是因为子img元素相对于父元素是绝对定位的，有效地将两个图像放在彼此的顶部。您不再需要更改元素的显示，从而允许进行转换。

此处更新的示例

---

或者，如果图像的高度不相同，则省略高度，但仍然相对定位父元素。与绝对定位两个图像相反，只定位一个图像，它仍然可以工作。

此处的替代示例

div.effect img.hover {
    opacity: 0;
    position:absolute;
    top:0;
}

同样值得注意的是，如果所有元素具有相同的值，则不需要在它们上包含过渡属性。把它放在div.effect img.image上就足够了。

看一下这个例子