CSS Filter Blur: Preventing Undefined Image Edges on Blurry Image During CSS Transition

Question

Preventing an image with undefined blurry edges can be achieved by adding a negative margin, but this fails during the CSS transition. How can you keep the edges of the image defined during the CSS transition when adding or removing a filter blur class?

Tested:

• Firefox 37: Works Great!
• Chrome 42: border where image and parent match image flash / blurry / undefined
• IE9: not so much ...

See my example: Codepen

HTML:

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Hind' rel='stylesheet' type='text/css'> <div class="container"> <img class="blur" src="http://budgetstockphoto.com/bamers/stock_photo_spectrum.jpg"/> </div> <div class="col"> <h2 class="montserrat">Hover Over Image</h2> <hr> <p class="hind">Preventing an image from having undefined blurry edges can be achieved by adding negative margin, but during a CSS transition this fails. As you can see, on-hover, the edges of the image become undefined/blurred. How can you keep the edges of an image defined during a CSS transition while applying or removing filter blur?<br><br>Hover over the image!</p> </div> 

CSS

 html,body{ margin:0; text-align:center; background:#F8F8F8; height:100%; } h2{ margin:1em 0; padding:0; line-height:1; color:#111; } p{ margin:1em 0; padding:0; line-height:1; text-align:justify; color:#999; } .montserrat{ font-family: 'Montserrat', sans-serif; } .hind{ font-family: 'Hind', sans-serif; } hr { width:100%; display: block; height: 1px; border: 0; border-top: 1px solid #222; margin: 1em 0; padding: 0; line-height:0; } .col{ max-width:400px; display:inline-block; height:100%; float:left; background:#333; padding-left:20px; padding-right:20px; } .container{ top: 50%; left: 50%; transform: translate(-50%,-50%); width:10%; display:inline-block; padding-top:10%; position:absolute; overflow:hidden !important; border-radius:50%; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px);/*prevents image from overflowing*/ } .container img{ position:absolute; min-width:calc(100% + 30px); height:calc(100% + 30px); left:-15px; right:-15px; top:-15px; bottom:-15px; -webkit-transition: .5s ease-in-out; } .blur{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } 

Just smidge from jQuery:

 $(document).ready(function(){ $('img').hover(function(){ $(this).toggleClass('blur'); }); }); 

Answer 1

Filters on images (as well as some animations and transitions) have much better results when applied to content in accelerated acceleration mode. Try to force the browser to use this mode, the easiest way is to use 3D conversion:

 .container img{ transform: translateZ(0.1px) } 

See this: http://codepen.io/ondrakoupil/pen/GJpaJo Now it's smooth (Chrome 39 on OS X)

Answer 2

In Chrome you can add

  backface-visibility: hidden; 

In your image, it fixes some blur problems.