Javascript 有填充网格的项目在其上有不透明度层，以便悬停

当用户将鼠标悬停在Pacery网格中的网格项上时，我尝试在网格项上模拟此动画（请注意，网格项包含背景图像）：

为此，他们使用此处强调的技术：

当一个叠加div隐藏在另一个div下面时，其作用类似于其顶部的另一层：

.box{
位置：绝对位置；
//背景：蓝色；
宽度：100%；
身高：100%；
背景图像：url（“http://lorempixel.com/380/222/nature");
}
.覆盖{
位置：绝对位置；
z指数：1；
不透明度：0；
宽度：100%；
身高：100%；
背景：白色；
-webkit过渡：不透明度0.25s缓解；
-moz过渡：不透明度0.25s减缓；
-o型过渡：不透明度0.25s缓减；
过渡：不透明度0.25s缓和；
}
.覆盖：悬停{
不透明度：1.0；
}

如果我理解正确， 最佳做法是使用“overflow:hidden”容器，并使用高度等于容器的“transform:translate”隐藏屏蔽内容。100%宽度将与任何内容配合使用

css:

html:

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

屏蔽内容
原始内容

如果我理解正确， 最佳做法是使用“overflow:hidden”容器，并使用高度等于容器的“transform:translate”隐藏屏蔽内容。100%宽度将与任何内容配合使用

css:

html:

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

屏蔽内容
原始内容

问题确实与Packey有关，我似乎无法像您一样添加div掩码，因为我无法保证它将与它位于同一位置。Pacery是一个框架，为这些砌体响应网格提供移动项目，我不知道如何跟踪叠加掩码div组件的放置位置。问题真正与Pacery有关，我似乎无法像您一样添加div掩码，因为我无法保证它将位于同一位置。Pacery是一个框架，为这些砌体响应网格提供移动项目，我不知道如何跟踪覆盖掩码div组件的放置位置。