悬停效果（交叉淡入淡出图像）方向

【问题标题】：Hover effect (crossfade image) direction悬停效果（交叉淡入淡出图像）方向
【发布时间】：2014-11-25 23:29:17
【问题描述】：

我想要做的是创建交叉淡入淡出图像的悬停效果。所以，我们有两个图像：img-2 和 img-1，前面还有一个文本，所以图层是 [img2]>[img1]>[text]。当我将鼠标悬停在文本层或前图像层时，两个图像应该相互淡入淡出，所以现在的图层是：[img1]>[img2]>[text]。我要应用的过渡方向是从下到上。我可以使用纯 CSS 来完成，还是应该使用 JQuery？谢谢

【问题讨论】：

标签： jquery html css image hover

【解决方案1】：

.box{
  overflow:   hidden;
  position:   relative;
  background: #780;
  width:  250px;
  height: 250px;
}
.boxBg{
  position:   absolute;
  margin-top: 100%;     /* note this */
  transition: 0.4s;     /* this */
  background: #a44;
  width:  inherit;
  height: inherit;
}
.box:hover .boxBg{
  margin-top: 0;        /* and this */
}
.boxText{
  position:   absolute;
  text-align: center;
  height: inherit;
  width:  inherit;
  color:  #fff;
  font:   200 20px/220px Helvetica, Arial, sans-serif;
}

<div class="box">
  
  <div class="boxBg"></div>
  <div class="boxText"><p>Hello World</p></div>
  
</div>

【讨论】：

请为您的纯代码答案添加一点解释