Ефект прозорості для зображень при наведенні з допомогою CSS3

36

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

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

Для створення привабливого ефекту прозорості, або якщо хочете, легкої розмитості зображень при наведенні, ми будемо використовувати чудове властивість opacity з обойми CSS3.

Показав відразу два варіанти використання властивості opacity. У першому випадку прозорість включається при наведенні на картинку, а в другому, зображення спочатку виводиться з легкою розмитістю і вже при наведенні на нього наводиться різкість.

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

.opacity {
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
opacity:1;
filter:alpha(opacity=100);
}
.opacity:hover {
opacity:0.5;
filter:alpha(opacity=50);
}

.opacity {
-moz-transition: all 0.4 s;
-webkit-transition: all 0.4 s;
-ms-transition: all 0.4 s;
-o-transition: all 0.4 s;
transition: all 0.4 s;
opacity:1;
filter:alpha(opacity=100);
}.opacity:hover {
opacity:0.5;
filter:alpha(opacity=50);
}

filter:alpha прописав не випадково, без цього милиці IE8 геть відмовиться обробляти прозорість, так що поки ще сила-силенна народу користовують цей недобраузер, незабутній про примочках. Те ж саме і з префіксами у властивості transition для інших браузерів, єдиної підтримки стандартів поки немає, а значить для надійності вказуємо конкретно)))

У другому варіанті все навпаки, картинка виводиться з легкої прозорістю за замовчуванням, а при наведенні на неї різкість плавно відновлюється. Досягається це, як ви вже напевно здогадалися, простою перестановкою властивостей:

.clarity {
opacity:0.5;
filter:alpha(opacity=50);
}
.clarity:hover {
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
opacity:1;
filter:alpha(opacity=100);
}

.clarity {
opacity:0.5;
filter:alpha(opacity=50);
}.clarity:hover {
-moz-transition: all 0.4 s;
-webkit-transition: all 0.4 s;
-ms-transition: all 0.4 s;
-o-transition: all 0.4 s;
transition: all 0.4 s;
opacity:1;
filter:alpha(opacity=100);
}

У прикладі, для другого варіанту прописав клас .clarity, як говоритися, що перше спало на думку, особливо на цьому аспекті не зациклюйтеся, тут на що вистачить фантазії, як обзовете, з тим і будете працювати))).

На цьому начебто і все. Найпростіший набір властивостей, невеликий стартовий шаблон для створення ще одного чудового ефекту з допомогою CSS3, сподіваюся, стане в нагоді кому-небудь, та й самому пам’ять подмолодить інший раз зайве.

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