悬停效果只带盒影,我的情况可以吗?

问题描述 投票:0回答:1

如你所见,我有两个类似效果的项目,在第一个案例中,我使用了一个叠加元素来实现你所看到的效果。

在第一种情况下,我使用了一个叠加元素来实现你所看到的效果,我想要的是同样的效果,但是要有阴影,而不是叠加技巧。

我无法实现的是让阴影从顶部开始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>
html css hover
1个回答
1
投票

在图像上应用阴影,依靠溢出来隐藏不需要的部分。

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>
© www.soinside.com 2019 - 2024. All rights reserved.