仅具有框阴影的悬停效果，在我的情况下可能吗？

Question

正如你在下面看到的，我有两个具有类似效果的项目。

在第一种情况下，我使用叠加元素来实现您所看到的效果。我想要的是具有相同的效果，但阴影不是叠加技巧。

我无法实现的是使阴影从顶部开始 20px，但从底部溢出为零，如您在第一项中看到的那样。

是否可以使用 css 影子来实现相同的目的，或者我必须选择第一个选项？

.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>

Answer 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>

仅具有框阴影的悬停效果，在我的情况下可能吗？

Hover effect with box-shadow only, is it possible in my case?

html

css

hover