Домой / Рецепты CSS / Эффект размытия для фото CSS (image hover effect)
Эффект размытия для фото CSS (image hover effect)

Эффект размытия для фото 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;
}

В данном примере реализован эффект размытия для изображений (эффект размытия появляется при наведении). Результат достигается благодаря использования CSS свойств. Пример отлично подойдет для галерей или портфолио. HTML 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,&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 3.14 ( 4 голосов )
100

Оставить комментарий

Ваш email не будет опубликован.

*