有packery電網項目對他們有不透明層對於徘徊

Question

我想在我的packery網我的網格項目模仿這個動畫，當用戶將鼠標懸停在他們（注意網格項目包括背景圖片）：

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

要做到這一點，他們使用的技術突出的位置： https://jsfiddle.net/q0d2rqt0/5/

其中疊加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>