Use css filter:blur to achieve the blur effect of images (code example)

The content of this article is about using CSS filters to achieve the blur effect of images. Friends in need can refer to it. Without further ado, let’s take a look at the main text.

I recently encountered the problem of filter:blur in css. First, let us take a look at an image on the page, as shown below:

HTML:

<div class="imageContainer">
<img  src="image/1.jpg" alt="Use css filter:blur to achieve the blur effect of images (code example)" >
</div>

CSS:

.imageContainer {
    border: solid 5px black;
    width: 1024px;
    height: 768px;
    }

Now, let’s apply a nice blur effect:

img {
-webkit-filter: blur(30px);
}

The effect is as follows:

Observed that the image is blurred beyond the borders of its container and a "glow" effect appears between the blurred image and the black border, now let's fix this issue.

Solution:

.imageContainer {
overflow: hidden;
}    
img {
+transform:scale(1.1);
}

The effect is as follows:

The above is the detailed content of Use css filter:blur to achieve the blur effect of images (code example). For more information, please follow other related articles on the PHP Chinese website!