CODEWITHSUNDEEP
jquerycsscss-transitionscss-filters
David Calvin
David Calvin

Reputation: 194

CSS Filter Blur: Prevent Undefined Image Edges on a Blurred Image during CSS Transition

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

Tested in:

Check out 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 a smidge of jQuery:

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

Upvotes: 6

Views: 2222

Answers (2)

Ondra Koupil
Ondra Koupil

Reputation: 1073

Filters on images (and also some animations and transitions) has much better results when applied on content that is in HW-accelerated mode. Try forcing the browser use that mode, most simply by using some 3d transform:

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

See this: http://codepen.io/ondrakoupil/pen/GJpaJo It is smooth now (Chrome 39 on OS X)

Upvotes: 2

Dave Plug
Dave Plug

Reputation: 1079

On Chrome you can add

  backface-visibility: hidden;

On your image, it fixes a bit of blurring problems.

Upvotes: 2

Related Questions