jquery - 悬停效果(淡入淡出图像)方向

Question

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

Answer 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>