Эффект размытия при наведении + описание для изображений на чистом CSS3

Разместил: Apocalypse
Опубликовано: 15 февраля 2018

Скачать Интересное решение для тех, кто хочет оригинально оформить свою галерею изображений Для начала посмотрите ДЕМО Установка: 1#: В самый низ вашего CSS вставьте:

.container {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 33.33333333%;
height: 50vh;
overflow: hidden;
background: #000;
}

.container:hover h1 {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}

.container:hover .photo {
-webkit-filter: grayscale(80%) blur(8px);
filter: grayscale(80%) blur(8px);
}

.container h1 {
position: relative;
opacity: 0;
-webkit-transform: translateY(40px);
transform: translateY(40px);
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;
color: #fff;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}

.container .photo {
position: absolute;
top: -1rem;
left: -1rem;
right: -1rem;
bottom: -1rem;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-filter: grayscale(80%) blur(0px);
filter: grayscale(80%) blur(0px);
-webkit-transition: -webkit-filter 0.4s ease-out;
transition: -webkit-filter 0.4s ease-out;
transition: filter 0.4s ease-out;
transition: filter 0.4s ease-out, -webkit-filter 0.4s ease-out;
}

.container .photo.photo1, .container .photo.photo5 {
background-image: url("/img/photo-1.jpg");
}

.container .photo.photo2, .container .photo.photo6 {
background-image: url("/img/photo-2.jpg");
}

.container .photo.photo3, .container .photo.photo4 {
background-image: url("/img/photo-3.jpg");
}

.container {

position: relative;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

width: 33.33333333%;

height: 50vh;

overflow: hidden;

background: #000;

}

.container:hover h1 {

opacity: 1;

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

.container:hover .photo {

-webkit-filter: grayscale(80%) blur(8px);

filter: grayscale(80%) blur(8px);

}

.container h1 {

position: relative;

opacity: 0;

-webkit-transform: translateY(40px);

transform: translateY(40px);

-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;

transition: opacity 0.4s, -webkit-transform 0.4s;

transition: opacity 0.4s, transform 0.4s;

transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;

color: #fff;

text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);

}

.container .photo {

position: absolute;

top: -1rem;

left: -1rem;

right: -1rem;

bottom: -1rem;

background-size: cover;

background-position: center center;

background-repeat: no-repeat;

-webkit-filter: grayscale(80%) blur(0px);

filter: grayscale(80%) blur(0px);

-webkit-transition: -webkit-filter 0.4s ease-out;

transition: -webkit-filter 0.4s ease-out;

transition: filter 0.4s ease-out;

transition: filter 0.4s ease-out, -webkit-filter 0.4s ease-out;

}

.container .photo.photo1, .container .photo.photo5 {

}

.container .photo.photo2, .container .photo.photo6 {

}

.container .photo.photo3, .container .photo.photo4 {

}

2#: Блоки с картинками оформляются вот так:

<div class="container">
<div class="photo photo1"></div>
<h1>Hello Dev</h1>
</div>

<div class="container">
<div class="photo photo2"></div>
<h1>Hello Dev</h1>
</div>

<div class="container">
<div class="photo photo3"></div>
<h1>Hello Dev</h1>
</div>

<h1>Hello Dev</h1>

</div>

<h1>Hello Dev</h1>

</div>

<h1>Hello Dev</h1>

</div>

В прикреплённом архиве три картинки из примера. Залейте их в папку img

Автор публикации

не в сети 4 дня

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: CSS3 Галерея Изображения Картинки Размытие Фото

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

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

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

Всевидящее око

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

Всевидящее око

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

Для публикации сообщений в чате необходимо авторизоваться