I am working on the project. I want to blur the picture. So in the html,

.lazy-img {
  filter: blur(20px);
}

<img src="https://www.shutterstock.com/image-photo/portrait-caucasian-young-man-yawning-600nw-2213335521.jpg" data-src="img/digital.jpg" alt="Computer" class="features__img lazy-img" />

But the problem is the picture is not blurred, because I do not know from where because i am not using this (below in html) anywhere in html or css, but browser in my opinion automatically attaches this element or i do not know what’s happening. Please see the picture.

So, as you see in the picture Img element has attached, don’t know how, because I have this nowhere

Element.style {
    Filter: invert ( 0 );
}

and because it is active automatically it disables this code

.lazy-img {
  filter: blur(20px);
}

And the picture is no blurred at all. And when i manually disable this element.style in the browser the picture becomes blurred.

Firstly, i tried to find this style in html then in css, also i am not interacting with it with JavaScript, but nothing is here and don’t understand why it is happening.