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

Question

As you can see below, I have two items with similar effect.
In the first case i use an overlay element in order to achieve the effect as you see it.
What I want is to have the same effect but with shadow not the overlay trick.
What I can't achieve is to make the shadow start 20px from top but have zero oveflow from the bottom as you see it in the first item.
Is it possible with css shadow to achieve the same thing or I have to go with the first option?
.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

Apply the shadow on the image and rely on overflow to hide the non needed part:
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>