javascript - 让 Packery 网格元素在其上方具有不透明层以进行悬停

Question

当用户将鼠标悬停在包装网格中的网格项上时，我尝试在它们上模仿此动画(请注意，网格项包含背景图像):

http://thefoxwp.com/portfolio-packery-4-columns/

为此，他们使用了此处突出显示的技术: https://jsfiddle.net/q0d2rqt0/5/

其中一个覆盖 div 隐藏在另一个 div 下方，就像其上的另一层一样:

.box {
  position: absolute;
  //background: blue;
  width: 100%;
  height: 100%;
  background-image: url("http://lorempixel.com/380/222/nature");
}

.overlay {
  position: absolute;
  z-index: 1;
  opacity: 0;
  width: 100%;
  height: 100%;
  background: white;
  -webkit-transition: opacity 0.25s ease-out;
  -moz-transition: opacity 0.25s ease-out;
  -o-transition: opacity 0.25s ease-out;
  transition: opacity 0.25s ease-out;
}

.overlay:hover {
  opacity: 1.0;
}

<div class="wrapper">
  <div class="box">
  </div>
  <div class="overlay">
  </div>
</div>

我正在尝试使用我的 Packery 网格来实现此目的，但我不确定如何实现此目的，因为我不知道如何使我的叠加 div 层在响应响应时与我的 Packery 网格一起移动。

我可以通过以下方式识别网格中每个元素的悬停效果:

  $container.on('mouseenter', ".item", function (event) {
      var target = event.target;
      var $target = $(target); 

      //code here to make the opacity adjustment to white on hover on
});

$container.on('mouseleave', ".item-", function (event) {
      var target = event.target;
      var $target = $(target);

      //code here to make the opacity adjustment reverse when hover away
});

所以我已经用正确的网格项确定了这里的悬停机制，无论它的位置在哪里，但是我在使用 CSS 时遇到了麻烦，无法在没有覆盖 div 层的情况下使不透明度在悬停时变为白色。

元素CSS:

.item1 {
  padding: 5px;
  width: 250px;
  height: 250px;
   -webkit-filter: saturate(1); 
    filter: saturate(1); 
}

.item-content1 {
  width:  100%;
  height: 100%;
  background-size: 100% 100%;
      border:1px solid #021a40;

  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
    
}

.item1.is-expanded {
  width: 375px;
  height: 400px;
}

.item1:hover { 
    cursor: pointer; 

}

.item1:hover .item-content1 {
}

.item1.is-expanded {
  z-index: 2;
}

.item1.is-expanded .item-content1 {
  
}

.item1.is-viewed {
    opacity: 0.8;
    -webkit-filter: sepia(1) hue-rotate(200deg);
    filter: sepia(1) hue-rotate(200deg);
}

有什么想法吗？我可以简单地向图像添加一些内容:悬停并使用 webkit 过渡吗？因为我在网格中使用背景图像，所以我是否误解了不透明层的概念？问题似乎是背景图像不可设置动画。

Answer 1

如果我理解正确的话最佳实践是使用具有“overflow:hidden”的容器，并使用“transform:translate”隐藏屏蔽内容，高度等于容器。 100% 宽度适用于任何内容。

codepen

CSS:

.container {
  width: 300px;
  position: relative;
  margin: 0 auto;
  height: 300px;
  overflow:hidden;
}

.org-content {
  background: red;
  height: 300px;
}

.mask {
  height: 300px;
  top: 300px;
  width: 100%;
  background-color: #3aa6db;
  opacity: 0;
  transition: all ease-in 0s;
  left: 0;
  overflow: hidden;
  position: absolute;
  pointer-events: none;
}

.container:hover>.mask {
  opacity: 1;
  transition: all ease-out 0.2s;
  transform: translate(0px, -300px);
  transition: all ease-in 0.25s;
}

html:

<div class='container'>
  <div class="mask">
    masked content
  </div>
  <div class='org-content'>
    original content
  </div>
</div>