Defined Edges With Css3 Filter Blur

Defined Edges With CSS3 Filter Blur

You could put it in a <div> with overflow: hidden; and set the <img> to margin: -5px -10px -10px -5px;.

Demo:

Output

Sample Image

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="http://placekitten.com/300" /></div>

CSS defined edges with blur transition

I think it's a browser bug.

the container background can be seen at the borders.

It can be made less visible if the container background is the same than the image. I have used inherit in the image to avoid setting it in 2 places.

body {
  background-color: black;
}

.container {
    position: fixed;
    top: 2.5vh;
    left: 2.5vh;
    width: 50vh;
    height: 50vh;
    background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
    overflow: hidden;
}

.image {
    background-image: inherit;
    margin: -5%;
    width: 110%;
    height: 110%;
    filter: blur(6px);
    transition: 1s;
}

.image:hover {
    filter: blur(0px);
}

<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="image"></div>
            placeholder text
        </div>
    </body>
</html>

Div with CSS3 Blur Filter Shows Blurred Edges on Transition

You can try to seperate the filter and the transform by considering a pseudo element. It seems to correctly render in Chrome

$('#background').on('click', function() {
  $(this).toggleClass('ready');
});

body,html {  margin: 0;  padding: 0;  height: 100%;  overflow: hidden;}
#container {  width: 100%;  height: 100%;  position: relative;}
#background {  background-image: url(https://zurb.com/playground/uploads/upload/upload/332/220px-BlurParklife.jpg);  background-size: 0 0;  left: -35px;  right: -35px;  top: -35px;  bottom: -35px;  position: absolute;  transition: transform 300ms ease-in-out;  transform: scale(1.1);}#background:before {  content:"";  position:absolute;  top:0;  left:0;  right:0;  bottom:0;  background-image:inherit;  background-size:cover;  filter: blur(15px);}#background.ready {  transform: scale(2);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="container">  <div id="background"></div></div>

CSS blur and retain sharp edges using absolute div

put your blur element in a container like this:

<div class="container">
    <div id="background"></div>
</div>

then instead of using height:100% and width:100% use like this:

.container{
    position:relative;
    width:300px;          /* this is an example */
    height:300px;         /* this is an example */
    overflow:hidden;
}

#background {
    left:-15px;
    right:-15px;
    top:-15px;
    bottom:-15px;
    /* other styles */
}

you need to remove 15px (or more/less) from each side of your element.

DEMO - Full DEMO

Getting defined edges of filter:blurred image with background cover

Place the #background in a container and add transform: scale(1.1) to the #background

.container {
   position: fixed;
   height: 100%;
   width: 100%;
   overflow: hidden;}

#background {
   height: 100%;
   width: 100%;    
   filter: blur(5px); //blur
   background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("../Resources/img/background-medium.jpg") no-repeat center 35% fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   transform: scale(1.1);}

Defined Edges With Css3 Filter Blur