Webkit-filter: blur

Пример использования CSS фильтра размытия -webkit-filter: blur.  Фильтр blur устанавливает на фото эффект размытия элемента, словно фотография или изображение находится не в фокусе. Посмотреть какие браузеры поддерживают данный фильтр размытия можно на сайте caniuse.com:

HTML

<figure class="frame">
<img src="https://dl.dropboxusercontent.com/u/330966/static/reel.png" />

<figcaption class="info">

<h3>Baitrunner XT FA</h3>



Созданная для ловли более мелких особей, катушка XT объединяет свободную шпулю Baitrunner с многодисковым передним фрикционом для идеальной работы при различных способах рыбалки от хищников до карпа.

 Обладая множеством технологических преимуществ лучших катушек Shimano, XT также имеет 4 шариковых и роликовый подшипник из нержавеющей стали.
 <a href="#" class="button l">Детали</a>
 <a href="#" class="button r">Купить</a>
 

 </figcaption>

</figure>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
* {margin:0px;padding:0px;color: #191818;text-align:center;}
.frame,
.frame:before,
.frame .info,
.info > p,
.button {
 display:block;
}
.frame:before,
.frame .info,
h3,
.info > p,
.button {
 position:absolute;
}
.frame,
.frame:before {
 background-position:0% 0%,
 0% 100%,
 100% 0%,
 100% 100%;
 background-repeat: no-repeat;
}
.frame {
 position:relative;
 width:400px;
 height:550px;
 margin: 5rem auto;
 background-image:linear-gradient(white 0px, white 10px),
 linear-gradient(white 0px, white 10px),
 linear-gradient(white 0px, white 10px),
 linear-gradient(white 0px, white 10px);
 background-size:10px 80px;
 background-position:0% 0%,
 0% 100%,
 100% 0%,
 100% 100%;
 background-repeat:no-repeat;
}
.frame:before {
 content:'';
 width:100%;
 height:100%;
 background-image:linear-gradient(white 0px, white 10px),
 linear-gradient(white 0px, white 10px),
 linear-gradient(white 0px, white 10px),
 linear-gradient(white 0px, white 10px);
 background-size: 80px 10px;
}
.frame > img {
 -webkit-animation:blurout 2s ease forwards;
 animation: blurout 2s ease forwards;
}
.frame:hover > img {
 -webkit-animation:blurin 1s ease forwards;
 animation: blurin 1s ease forwards;

}
.frame .info {
 bottom:30px;
 left:30px;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
 width:340px;
 height:50px;
 overflow:hidden;
 -webkit-transition:height 0.3s 0.5s;
 transition: height 0.3s 0.5s;
}
.frame:hover .info {
 height:490px;
 -webkit-transition:height 0.3s;
 transition: height 0.3s;
}
h3 {
 top:0px;
 left:0px;
 width:100%;
 background:white;
 font-size:1.5rem;
 font-weight:300;
 text-transform:uppercase;
 letter-spacing:2px;
 line-height:50px;
 z-index:333;
}
h3:after {
 content:'';
 position:absolute;
 bottom:0px;
 left:15px;
 width:0px;
 height:1px;
 background:black;
 -webkit-transition:width 0.1s;
 transition: width 0.1s;
}
.frame:hover h3:after {
 width:310px;
 -webkit-transition:width 0.4s 1.7s;
 transition: width 0.4s 1.7s;
}
.info > p {
 overflow:hidden;
 top:0px;
 left:0px;
 height:0px;
 padding:0px 15px 30px 15px;
 background:rgba(255,255,255,0.3);
 text-align:left;
 z-index:222;
 -webkit-transition:height 0.2s,
 padding 0.2s,
 background 0.2s;
 transition:height 0.2s,
 padding 0.2s,
 background 0.2s;
}
.frame:hover .info > p {
 height:395px;
 padding:65px 15px 30px 15px;
 background:rgba(255,255,255,1);
 -webkit-transition:height 0.3s 0.6s,
 padding 0.3s 0.6s,
 background 1.1s 1.2s;
 transition:height 0.3s 0.6s,
 padding 0.3s 0.6s,
 background 1.1s 1.2s;
}
.button {
 bottom:15px;
 height:50px;
 width:147px;
 font-size:1.5rem;
 letter-spacing:2px;
 line-height:50px;
 text-transform:uppercase;
 text-decoration:none;
 -webkit-box-shadow:inset 0px 0px 0px 1px #191818;
 box-shadow: inset 0px 0px 0px 1px #191818;
 -webkit-transition:all 0.4s;
 transition: all 0.4s;
}
.l {
 left:15px;
}
.r {
 right:15px;
}
.button:hover {
 -webkit-box-shadow:inset 0px 0px 0px 3px #191818;
 box-shadow: inset 0px 0px 0px 3px #191818;
}
@-webkit-keyframes blurout {
 0% {-webkit-filter: blur(3px);filter: blur(3px);}
 100% {-webkit-filter: blur(0px);filter: blur(0px);}
}

@-webkit-keyframes blurin {
 0% {-webkit-filter: blur(0px);filter: blur(0px);}
 100% {-webkit-filter: blur(3px);filter: blur(3px);}
}
body {
 background: #d0d0d0;
 font-family: 'Source Sans Pro', sans-serif;
 font-size:1.1rem;
 font-weight:300;
 line-height:1.6rem;
}