Add Box Shadow around Image ignoring the Padding-CodePudding

I want to add a box-shadow to three images aligned next to each other. They all have a padding of 10px. When I apply the box shadow, it goes around the padding. I want it to go around the image, ignoring the padding.

.front-images {
  margin-top: 2%;
  display: flex;
  justify-content: center;
}
.front-images img {
  width: 100%;
  border-radius: 10px;
  padding: 10px;
  transition: 0.5s;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.5);
}

<div >
    <img src="https://via.placeholder.com/200x200" alt="">
    <img src="https://via.placeholder.com/200x200" alt="">
    <img src="https://via.placeholder.com/200x200" alt="">
</div>

I also tried adding a margin property instead of padding but it doesn't work. Is there a way to ignore the padding, adding the box shadow around the image?

CodePudding user response：

.front-images img {
    /* box-shadow: 0 0 20px 0 rgb(0 0 0 / 50%); */
    filter: drop-shadow(0px 0px 20px rgb(0 0 0 / 50%));
}