当用户悬停在包装厂网格中的网格项上时,我正试图在这些网格项上模拟此动画(请注意,网格项包含背景图像):
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层的情况下使悬停时的不透明度变为白色。
Cs:
.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转换悬停?我是不是误解了不透明度层的概念,因为我使用背景图像作为网格?问题似乎是背景图像不可设置动画。
如果我理解正确,最佳做法是使用具有"overflow:hidden"的容器,并使用高度等于容器的"transform:translate"隐藏屏蔽内容。100%宽度将对任何内容作出响应。
代码笔
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>