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

Question

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

Answer 1

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;