如你所见,我有两个类似效果的项目,在第一个案例中,我使用了一个叠加元素来实现你所看到的效果。
在第一种情况下,我使用了一个叠加元素来实现你所看到的效果,我想要的是同样的效果,但是要有阴影,而不是叠加技巧。
我无法实现的是让阴影从顶部开始20px,但从底部开始的阴影为零,就像你在第一个项目中看到的那样。
是否可以用css shadow来实现同样的效果,或者我必须选择第一个选项?
.container {
padding: 20px;
}
.item, .desired-item {
max-width: 300px;
height: 300px;
position: relative;
}
.desired-item {
padding-top: 25px;
}
figure {
width: 100%;
padding: 0;
margin: 0;
}
figure img {
width: 100%
}
.item .overlay {
position: absolute;
background-color: #ff6666;
width: 100%;
height: calc(100% - 20px);
visibility: visible;
opacity: 1;
z-index: -1;
right: -20px;
transition: all .25s;
margin-top: 20px;
}
.item figure:hover .overlay {
visibility: visible;
opacity: 0.3;
z-index: 1;
right: 0;
height: calc(100% - 0px);
margin-top: 0;
}
.desired-item figure:hover {
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
}
.desired-item figure {
-webkit-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
transition: all .5s;
}
<div class="container">
<h2>overlay effect:</h2>
<div class="item">
<figure>
<div class="overlay"></div>
<img src="https://via.placeholder.com/600x600.jpg/09f/fff">
</figure>
</div>
<h2>Shadow effect:</h2>
<div class="desired-item">
<figure>
<div class="overlay"></div>
<img src="https://via.placeholder.com/600x600.jpg/09f/fff">
</figure>
</div>
</div>
在图像上应用阴影,依靠溢出来隐藏不需要的部分。
figure img {
display:block;
box-shadow: 20px 20px 0px 0px rgba(0, 0, 0, 0.75);
transition: all .5s;
}
figure:hover img {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75);
}
figure {
display:inline-block;
padding-right:20px;
overflow: hidden;
}
<figure>
<img src="https://via.placeholder.com/150x150.jpg/09f/fff">
</figure>