How to get image with css filter: blur and sharp edges?

Question

I want to blur the image on hover.

The problem is that the edges of the image also blur unpleasantly. In Fiddle, you can see it clearly with a green background.

If I scaled the image, i.e. 1.2, it would fix the problem at the end, but blurry edges still appear during the transition.

Any ideas on how to have sharp edges with this effect?

http://jsfiddle.net/d8Njs/

HTML:

<div class="item"> <img src="http://placekitten.com/300"/> </div> 

CSS

 .item { overflow: hidden; width:300px; height: 300px; background: green; } .item img{ transition:all .5s ; } .item img:hover{ -webkit-filter: blur(5px); /*skaling the image would help, but it still looks bad during the transition -webkit-transform:scale(1.2); */ } 

Answer 1

The methods that I know about are well described in http://demosthenes.info/blog/534/Crossbrowser-Image-Blur :

1. If you have an image that has the same color on all outer edges as in the above example, you can set the background color of the body or element of the container to the same color. (FYI doesn't really apply to you, at least not in your violin).

2. Use the clip property to crop the edges of the image. the clip is always indicated in the following order:

clip: rect( top, offset of right clip from left side, offset of bottom from top, left)

In the above example, the image has a width of 367 pixels × 459 pixels and a blur of 2 pixels, so the clip will be listed as:

clip: rect(2px,365px,457px,2px);

(Note that the clip applies only to elements that have a position: absolute, applied to them. If you want support in IE8 and earlier, remember to leave px at the end of the values). (I don’t know if you put photos on the stack, a grid or just callouts, etc. It may be advisable if you can learn absolute positioning.)

3. Wrap the image in the containing element (a, for example), which is slightly smaller than the image, applying overflow: hidden to the outer element and moving the image to the left and slightly up to prevent visible blurring at those edges.

-

Also, throwing a border around the image seems to help, at least in Webkit, but I haven't tested it extensively.

 .item img{ transition:all .5s ; border:1px solid #000; } 

Answer 2

A bit of SVG:

 <svg width="200" height="200" viewBox="10 10 280 280"> <filter id="blur"> <feGaussianBlur stdDeviation="10"/> </filter> <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300"/> </svg> 

And some CSS:

  #kitten:hover { filter:url(#blur); } 

Should produce the desired effect. http://jsfiddle.net/5Jk6p/

 #kitten:hover { filter:url(#blur); } 

 <svg width="200" height="200" viewBox="10 10 280 280"> <filter id="blur"> <feGaussianBlur stdDeviation="10" /> </filter> <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" /> </svg> 

Answer 3

Setting the clip seems to solve a more or less problem. However, at the end of the transition there is a strange effect. Forced GPU (using hack translateZ) seems to solve the problem.

CSS

 div { width:300px; height:300px; position: absolute; } .no { left: 400px; top: 10px; } .box img { transition: 2s -webkit-filter; position:absolute; left: -3px; top:-3px; clip: rect(5px 295px 295px 5px); -webkit-transform: translateZ(0px); } div img { transition: 2s -webkit-filter; position:absolute; left: -3px; top:-3px; clip: rect(5px 295px 295px 5px); } div img:hover{ -webkit-filter: blur(8px); } 

demonstration with comparative with and without conversion

Answer 4

After spending a day on this, I was able to create a crappy, ugly, hacker solution. He probably won’t use it in a real project, maybe it might inspire someone else to use something in my solution, but make it a little less ugly. At least the end result looks the way I would like!

Using a white frame and window size: frame-frame, and then some of the fields into which I was able to get the final result have sharp edges and 3/4 edges so as not to show a green background during the transition. If someone finds out why some edges disappear with the background during the transition, this will probably help.

http://jsfiddle.net/fVNqm/2/

HTML:

 <div class="box"> <img src="http://placekitten.com/300" /> <div class="tophack"></div> </div> 

CSS

 .box{ box-sizing: border-box; position:relative; border:3px solid white; overflow: hidden; background:green; width:300px; height:300px; } div img { transition:.2s all; position:absolute; left: -3px; top:-3px; } div img:hover{ filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } .tophack{ background:white; width:300px; height:3px; z-index:10; position:absolute; top: 0px; } 

Still hoping for something better!

Answer 5

add this to your css

 .item img{margin:0px 0px 0px -1px;} 

Answer 6

I would check this link and go from there. The best part about javascript has very weak ideas.

http://fabricjs.com/image-filters/