How to Achieve Defined Edges with CSS3 Blur Filter?

Achieving Defined Edges with CSS3 Filter Blur

Incorporating CSS3 filters to blur images enhances visual effects. However, the default blur filter extends beyond the image boundaries, resulting in blurred edges. To maintain defined edges while blurring the image, explore the following solution:

Solution:

Enclosing the blurred image within a

element with overflow: hidden; attribute prevents the filter from spilling over the parent element. Additionally, adjusting the margins, as seen in the demo code below, keeps the edges sharp.

Demo:

[Image of desired output with defined edges and blurred background]

CSS:

img {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}

HTML:

<div><img  src="/static/imghwm/default1.png" data-src="http://placekitten.com/300" class="lazy" alt="How to Achieve Defined Edges with CSS3 Blur Filter?" ></div>

The above is the detailed content of How to Achieve Defined Edges with CSS3 Blur Filter?. For more information, please follow other related articles on the PHP Chinese website!