How to blur image edges in foreground when using Bootstrap 4 - css

Question

I'm trying to blur the edges of an image like the picture shown at https://stackoverflow.com/a/24953573.
I need to do this on a foreground image (not one set in css) because the img url is dynamically changed. But box-shadow seems to have no effect on a foreground image. Also I'm using the Bootstrap 4.3 img-fluid class.
In other words, the code at the SO post referenced above works, but the edges on this image are not blurred (css inline for simplicity):
<img src="/images/mypic.jpg"
class="img-fluid"
style="box-shadow: 0 0 5px 5px white inset;">
.img-fluid sets max-width: 100% and height:auto. I tried over-riding these with specific values (which I don't want to do to maintain a responsive image), but it had no effect either.

Answer 1

You need to wrap img tag by div element with class name of .img-blur so use the :after pseudo-element can be used to insert some content after the content of an element.
.img-blur{
position: relative;
display: inline-block;
}
.img-blur:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 10px 10px #ffffff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row" >
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
</div>
</div>
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/ffff22">
</div>
</div>
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
</div>
</div>
</div>
</div>

Answer 2

There is a problem with style images with inset.
But you have 2 alternatives to do this. You can add a container with position relative and inside put img with class img-fluid and div with positon absolute to this container.
The second option is to set a container with position relative and img inside and style that container with pseudo-class ::after.
If you will do that it works but there will be a problem with the right box-shadow that if img is smaller than a container. You can fix these if you will use some JS code.
I made an example with jQuery ( cause you are using bootstrap and bootstrap is using jquery).
https://codesandbox.io/s/flamboyant-wing-z9lhm

Answer 3

Unfortunally, CSS 'Inset' Box shadows don't work on img tags. To workaround this, you have a few couple options, for example, is possible wrap the image on a div tag and use a pseudo-element to apply the box-shadow on it.
The problem here is that, as standard, the div tag is a "Block" element, and as so will cover the entire parent width. You could fix this applying a display: inline-block or a float: left property. Perhaps is not the best "standard-compliant", but will work on this case. I attach a example with this concept below:
div {
position: relative;
display: inline-block;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 5px 5px white inset;
}
<div>
<img src="https://picsum.photos/200/300" class="img-fluid">
</div>