所以当你翻转左边的大型销售图片时,我正试图重新创建这个cool hover effect seen here。
Chris Coyier然后创建了super detailed tutorial here. 基本上在翻转时,这个很酷的对角线剥离背景会在div / box / image后面开始制作动画。
除非我将div包含在列表中(ul li),否则一切都有效。一旦我这样做,我的代码就会停止工作:(有没有办法解决这个问题?或者我做了什么新手的错误?
这是我的代码: http://codepen.io/leongaban/pen/hpzqD
HTML
<ul>
<li>
<div class="thumb">
<div class="thumb-hover"></div>
<a href="#">
<img src="http://f.cl.ly/items/3k3d1g3K34470d2v2K3O/50d942d85384a.jpeg"/>
</a>
</div>
</li>
</ul>
CSS
ul li {
list-style: none;
float: left;
}
.thumb {
width: 376px;
padding: 15px;
position: relative;
float: left;
margin: 0 20px 0 0;
}
.thumb > img {
display: block;
position: relative;
}
.thumb:hover .product-hover, .thumb:active .product-hover {
opacity: 1;
}
.thumb-hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.3s ease;
background-size: 30px 30px;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
animation: barberpole 0.5s linear infinite;
}
@keyframes barberpole {
from {
background-position: 0 0;
}
to {
background-position: 60px 30px;
}
}
答案 0 :(得分:1)
看起来你的例子中有一个小错字。 .product-hover应该成为.thumb-hover
另外,你会希望你的CSS为.thumb&gt;一个{display:block;位置:相对;如果没有它,条形动画将位于图像之上。
在您的codepen中将scss更改为以下内容:
> a {
display: block;
position: relative;
}
&:hover, &:active {
.thumb-hover {
opacity: 1;
}
}
答案 1 :(得分:0)
假设您试图影响代码段中的<img>
,这不会起作用:
.thumb > img { ... }
那个(特别是>
)意味着“将以下规则应用于<img>
元素,这些元素是具有类.thumb
的任何元素的直接后代(子元素)。”但根据你的标记,情况并非如此。尝试删除该CSS规则定义中的>
。