Галерея с эффектом размытия фона (blur effect)

Пример создания галереи с очень интересным эффектом.

При наведении на изображение меняется фон, в зависимости от выбранного изображения. На фоне мы видим размытое изображения из галереи, на которое мы навели курсором мышки.

Если из CSS кода убрать:

-webkit-filter: blur(50px);
filter: blur(50px);

Мы получим не размытый, а изображение из галереи на которое мы навели мышкой, но в полном размере и без эффекта размытия.

Как видите, таким образом можно создать своего рода галерею без лайтбоксов, просматривая изображения в виде фона страницы.

Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery.

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

HTML

<section id="gallery" class="gallerydefault">
 <div id="gallerybg">
 </div>
 <div class="container">
 <div class="thumb">
 <img src="https://wp-lessons.com/wp-content/uploads/2014/12/img1g.jpg" alt="photo">
 </div>
 <div class="thumb">
 <img src="https://wp-lessons.com/wp-content/uploads/2014/12/img2g.jpg" alt="photo">
 </div>
 <div class="thumb">
 <img src="https://wp-lessons.com/wp-content/uploads/2014/12/img3g.jpg" alt="photo">
 </div>
 <div class="thumb">
 <img src="https://wp-lessons.com/wp-content/uploads/2014/12/img4g.jpg" alt="photo">
 </div>
 <div class="thumb">
 <img src="https://wp-lessons.com/wp-content/uploads/2014/12/img5g.jpg" alt="photo">
 </div>
 <div class="thumb">
 <img src="https://wp-lessons.com/wp-content/uploads/2014/12/img6g.jpg" alt="photo">
 </div>
 <div class="thumb">
 <img src="https://wp-lessons.com/wp-content/uploads/2014/12/img7g.jpg" alt="photo">
 </div>
 <div class="thumb">
 <img src="https://wp-lessons.com/wp-content/uploads/2014/12/img8g.jpg" alt="photo">
 </div>
 </div>
 </section>

CSS

html, body {
 height: 100%;
}

body {
 font-family: Helvetica, sans-serif;
 margin: 0;
 background: #222;
 color: white;
}

#header {
 background: #333;
}

.container {
 width: 800px;
 margin: 20px auto;
 text-align: center;
}

.thumb {
 width: 170px;
 margin: 20px 10px 0;
 display: inline-block;
 vertical-align: middle;
 cursor: pointer;
 opacity: .9;
}
.thumb:hover {
 opacity: 1;
}
.thumb img {
 width: 170px;
}

#gallerybg {
 position: absolute;
 height: 100%;
 z-index: -1;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 background-image: url(http://lorempixel.com/output/nightlife-q-c-640-480-5.jpg) no-repeat;
 background-size: cover;
 background-position: center bottom;
 opacity: .5;
 -webkit-transition: background-image 0.5s ease-out;
 -moz-transition: background-image 0.5s ease-out;
 transition: background-image 0.5s ease-out;
 -webkit-filter: blur(50px);
 filter: blur(50px);
 -webkit-transform: translateZ(0);
 -moz-transform: translateZ(0);
 -ms-transform: translateZ(0);
 -o-transform: translateZ(0);
 transform: translateZ(0);
}

JS

 $( "#gallery .container .thumb" ).hover(function() {
 var imgUrl = $('img', this).attr("src");
 $('#gallerybg').css("background-image", "url(" + imgUrl + ")");
 });