Generate outline effect on image using css3

Question

How can I generate in realtime this outline effect similar to this image using css3 or javascript?

http://i.imgur.com/1OEnuKF.jpg

Answer 1

Here is an similar effect achieved with filter and background-blending

 div { width: 180px; height: 400px; display: inline-block; } .test { background: url(http://i.imgur.com/1OEnuKF.jpg), url(http://i.imgur.com/1OEnuKF.jpg); background-position: 0px 0px, 3px 3px; background-size: cover; background-blend-mode: difference; -webkit-filter: blur(1px)invert(1); } .target { background: url(http://i.imgur.com/1OEnuKF.jpg); background-position: top right; background-size: cover; } 

 <div class="test"></div> <div class="target"></div> 

The left part of the image is achieved from the original image; the right hand is the target image.

Answer 2

there are some filter effects in CSS3 , only for webkit
I've no idea how to use them to make the effect you showed
but I think they can help
here is a link that you can test CSS3 filters and get the css code
http://html5-demos.appspot.com/static/css/filters/index.html
and here you can see it's Browser compatibility
hope that help's