Три ефекти при наведенні на зображення

40

Багато разів писав про різних hover-ефекти для зображень, так і в інтернетах цього добра напрацювали предостатньо. В цей раз вирішив використовувати відразу три ефекту на одному зображенні, що спрацьовують при наведенні на картинку. Крім того продемонструю застосування властивості box-shadow в оформленні зображення, звичайно властивість досить таки заїжджене, але подивитися на ще одну варіацію думаю не зашкодить.

Що стосується hover-ефектів, ми використовуємо зум-ефект (масштабування зображення) при наведенні з допомогою трансформації scale(), одночасно застосуємо похилий блик проскальзывающий через всі зображень з кута на кут, ну, і нарешті, досить поширений ефект спливаючій підпису до картинки.
Спливаючу підпис зробив найпростішу, без особливих наворотів, лише для того що б показати, що можливо використовувати відразу декілька ефектів при наведенні на картинку. В’їхавши в тему, ви легко зможете видозмінити і підпис і інші ефекти у відповідності з вашими вподобаннями:

Три эффекта при наведении на изображение

Дивитися ДемоСкачать Исходники

По розкладці в html писати особливо то й нічого. Весь розклад складається з div контейнер з розміщеними в ньому зображенням і підписом до нього, на які ми накладемо заявлені вище ефекти безпосередньо вже в css,
І так, блок з картиною в html буде виглядати приблизно так^

<div class="box-thumb">
<img src="images/image01.jpg">
<p class="descript">НЕ БУДІТЬ РОСІЙСЬКОГО ВЕДМЕДЯ!</p>
</div>

НЕ БУДІТЬ РОСІЙСЬКОГО ВЕДМЕДЯ!

Як ви розумієте підпис обрана довільно, у вас вона може бути і довше і зовсім іншого змісту.

Тепер переходимо до оформлення самого зображення і формування ефектів за допомогу. чарівних властивостей CSS3. Кожне правило і властивість розписувати у всіх подробицях не буду, просто розміщу розгорнуті коментарі безпосередньо в коді CSS. Перелопативши весь представлений в прикладі фарш, впевнений, ви легко розберетеся що куди і навіщо:

/* Контейнер, в якому розміщуємо зображення */
.box-thumb {
width: 100%;
max-width: 648px; /* чуйні розміри (опціонально) */
margin: 0 auto; /* распологаем по центру */
padding: 0;
overflow: hidden;
position: relative; /* відносне позиціонування */
cursor: pointer;
/* Зовнішня тінь блоку з зображенням */
-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
/*
* Стилі зображення всередині
* батьківського контейнера
*/
.box-thumb img {
max-width: 100%;
height: auto;
display: block;
/* трансформація - реальний масштаб картинки */
-webkit-transform: scale(1);
transform: scale(1);
/* час виконання трансформації */
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
/*
* Масштабується зображення за допомогою
* трансформації при наведенні
*/
.box-thumb:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
/* Відтворимо ефект похилого відблиску */
.box-thumb::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: ";
width: 50%;
height: 100%;
/*
* використовуємо лінійний градієнт
* визначимо початкове і кінцеве розташування,
* колір, розмір і елементи трансформації
*/
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
/* Створимо анімацію і встановимо час виконання */
.box-thumb:hover::before {
-webkit-animation: shine .85s;
animation: shine .85s;
}
/*
* описуємо анімацію властивостей CSS
* у вигляді переліку ключових кадрів
*/
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
/* Формирум блок з підписом до зображення */
.box-thumb p.descript {
position: absolute;
bottom: 10px;
right: 0;
max-width: 100%;
background: rgba(255, 255, 255, 0.6);
padding: 0.5em;
font: 300 0.875rem/140% 'Exo 2', Tahoma, Verdana, Segoe, sans-serif;
/* Спочатку прихована */
opacity: 0;
/* Встановлюємо плавний перехід між двома станами елемента */
-webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
transition: opacity 0.7s, transform 0.7s;
/* Використовуємо трансформації */
-webkit-transform: scale3d(0.9, 0.9, 1);
transform: scale3d(0.9, 0.9, 1);
-webkit-transform: translate3d(-180%, 0, 0);
transform: translate3d(-180%, 0, 0);
visibility: visible;
}
/* Зміни стану елемента (підписи) при наведенні на зображення */
.box-thumb:hover p.descript {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

/* Контейнер, в якому розміщуємо зображення */.box-thumb {
width: 100%;
max-width: 648px; /* чуйні розміри (опціонально) */
margin: 0 auto; /* распологаем по центру */
padding: 0;
overflow: hidden;
position: relative; /* відносне позиціонування */
cursor: pointer;
/* Зовнішня тінь блоку з зображенням */
-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
/*
* Стилі зображення всередині
* батьківського контейнера
*/
.box-thumb img {
max-width: 100%;
height: auto;
display: block;
/* трансформація – реальний масштаб картинки */
-webkit-transform: scale(1);
transform: scale(1);
/* час виконання трансформації */
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
/*
* Масштабується зображення за допомогою
* трансформації при наведенні
*/
.box-thumb:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}/* Відтворимо ефект похилого відблиску */
.box-thumb::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: “;
width: 50%;
height: 100%;
/*
* використовуємо лінійний градієнт
* визначимо початкове і кінцеве розташування,
* колір, розмір і елементи трансформації
*/
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
/* Створимо анімацію і встановимо час виконання */
.box-thumb:hover::before {
-webkit-animation: shine .85s;
animation: shine .85s;
}
/*
* описуємо анімацію властивостей CSS
* у вигляді переліку ключових кадрів
*/
@-webkit-keyframes shine {
100% {
left: 125%;
}
}@keyframes shine {
100% {
left: 125%;
}
}
/* Формирум блок з підписом до зображення */
.box-thumb p.descript {
position: absolute;
bottom: 10px;
right: 0;
max-width: 100%;
background: rgba(255, 255, 255, 0.6);
padding: 0.5 em;
font: 300 0.875 rem/140% ‘Exo 2’, Tahoma, Verdana, Segoe, sans-serif;
/* Спочатку прихована */
opacity: 0;
/* Встановлюємо плавний перехід між двома станами елемента */
-webkit-transition: opacity 0.7 s, -webkit-transform 0.7 s;
transition: opacity 0.7 s, transform 0.7 s;
/* Використовуємо трансформації */
-webkit-transform: scale3d(0.9, 0.9, 1);
transform: scale3d(0.9, 0.9, 1);
-webkit-transform: translate3d(-180%, 0, 0);
transform: translate3d(-180%, 0, 0);
visibility: visible;
}
/* Зміни стану елемента (підписи) при наведенні на зображення */
.box-thumb:hover p.descript {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

Посмотриев на css код, ви зрозумієте, що можливості створення різних ефектів обмежуються тільки висотою польоту фантазій. Так що сміливо експериментуйте, міняй ті значення, види трансформацій та анімації та впевнений ви зможете отримати свій оригінальний ефект, тим більше хороших прикладів в інтернеті безліч.

Дивитися ДемоСкачать Исходники

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: