Эффект размытия для фото CSS (image hover effect)

В данном примере реализован эффект размытия для изображений (эффект размытия появляется при наведении). Результат достигается благодаря использования CSS свойств.

Пример отлично подойдет для галерей или портфолио.

HTML

<ul class="gallery">
 <li><a href="#"><img src="http://dev.steelehouse.com/codepen/game.jpg"/><span class="name">Rexodus<span class="title">Destruction Expert</span></span></a></li>
 <li><a href="#"><img src="http://dev.steelehouse.com/codepen/hans.jpg"/><span class="name">Joe Shmoe <span class="title">Philanthrapy Expert</span></span></a></li>
 <li><a href="#"><img src="http://dev.steelehouse.com/codepen/matt.jpg"/><span class="name">Steve Snyder <span class="title">Beard Extrodinarre</span></span></a></li>
</ul>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font: inherit;
 font-size: 100%;
 vertical-align: baseline;
}

html {
 line-height: 1;
}

ol, ul {
 list-style: none;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

caption, th, td {
 text-align: left;
 font-weight: normal;
 vertical-align: middle;
}

q, blockquote {
 quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
 content: "";
 content: none;
}

a img {
 border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
 display: block;
}

body {
 color: white;
 font-family: 'helvetica-nue', helvetica, arial, sans-serif;
}

.gallery {
 margin: 0 auto;
 text-align: center;
 width: 100%;
 padding: 20px;
}
.gallery li {
 width: 421px;
 min-height: 100%;
 text-align: center;
 height: 255px;
 position: relative;
 margin: 0 auto;
 display: inline-block;
 overflow: hidden;
 background-color: black;
}
.gallery li:nth-child(2) img {
 margin: 0;
 display: inline-block;
 float: right;
}
.gallery li .name {
 text-decoration: none;
 text-transform: uppercase;
 text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 5px;
 color: white;
 font-weight: lighter;
 font-size: 20px;
 letter-spacing: .1em;
 position: absolute;
 display: block;
 top: 40%;
 left: 0;
 text-align: center;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 opacity: 0;
 z-index: 2;
 width: 100%;
 height: 100%;
}
.gallery li .name .title {
 display: block;
 text-transform: none;
 font-style: italic;
 font-size: 80%;
 color: rgba(255, 255, 255, 0.7);
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 opacity: 0;
 -moz-transition-property: all;
 -o-transition-property: all;
 -webkit-transition-property: all;
 transition-property: all;
 -moz-transition-delay: 0.2s;
 -o-transition-delay: 0.2s;
 -webkit-transition-delay: 0.2s;
 transition-delay: 0.2s;
 -moz-transition-duration: 0.9s;
 -o-transition-duration: 0.9s;
 -webkit-transition-duration: 0.9s;
 transition-duration: 0.9s;
}
.gallery li:hover .name {
 filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
 opacity: 1;
 -moz-transform: scale(1, 1);
 -ms-transform: scale(1, 1);
 -webkit-transform: scale(1, 1);
 transform: scale(1, 1);
 -moz-transition-property: all;
 -o-transition-property: all;
 -webkit-transition-property: all;
 transition-property: all;
 -moz-transition-duration: 0.6s;
 -o-transition-duration: 0.6s;
 -webkit-transition-duration: 0.6s;
 transition-duration: 0.6s;
}
.gallery li:hover .title {
 filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
 opacity: 1;
}
.gallery li:hover img {
 background-position: top top;
 -webkit-filter: grayscale(0.4) blur(2px);
 filter: grayscale(0.4) blur(2px);
 -moz-transition-property: all;
 -o-transition-property: all;
 -webkit-transition-property: all;
 transition-property: all;
 -moz-transition-duration: 0.8s;
 -o-transition-duration: 0.8s;
 -webkit-transition-duration: 0.8s;
 transition-duration: 0.8s;
}
.gallery li img {
 display: block;
 width: 421px;
 margin: 0 auto;
 display: inline-block;
 text-align: center;
 -moz-transition-property: all;
 -o-transition-property: all;
 -webkit-transition-property: all;
 transition-property: all;
 -moz-transition-duration: 0.4s;
 -o-transition-duration: 0.4s;
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
}