How to blur part of an image <img> tag using css, I don't have an option to use background image

Question

I want to make some part of an image blur.

   li.slide:before {
     content: "";
     width: 25%;
     position: absolute;
     height: 100%;
     backdrop-filter: blur(25px);
     left: 0;
    }

    li.slide:after {
     content: "";
     width: 25%;
     position: absolute;
     height: 100%;
     backdrop-filter: blur(25px);
     right: 0;
    }

This code making image blur as expected in chrome, As backdrop-filters are not supported in firefox how can i achieve same effect in firefox?

<div class="carousel carousel-slider">
    <button type="button" class="control-arrow control-prev control- 
    disabled" style="display: none;"></button>
    <div class="slider-wrapper axis-horizontal">
        <ul class="slider animated" style="transform: translate3d(0%, 
        0px, 
        0px); transition-duration: 350ms;">
            <li class="slide selected"><img src="../../slide1.jpg" /> . 
            </li>
            <li class="slide"><img src="../../slide2.jpg" /></li>
        </ul>
    </div>
    <button type="button" class="control-arrow control-next"></button>
</div>

Answer 1

The blur() CSS function applies a Gaussian blur to the input image. Its result is a .

filter: blur(4px);

Link: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur