Ефект прозорості для зображень при наведенні за допомогою CSS3
Як оригінально оформити зображення в момент взаємодії з користувачем? Тобто якось цікаво виділити картинку при наведенні на неї покажчика миші.
Технічних рішень цього завдання достатньо і розписані вони в найдрібніших подробицях. Так що нового нічого не відкрию, а просто-напросто поділюся простеньким фрагментом коду CSS, який в різних варіація часто використовую сам.
Для створення привабливого ефекту прозорості, або якщо хочете, легкої розмитості зображень при наведенні, ми будемо використовувати чудова властивість opacity з обойми CSS3.
Показав відразу два варіанти використання властивості opacity. У першому випадку прозорість включається при наведенні на картинку, а в другому, зображення спочатку виводиться з легкої розмитістю і вже при наведенні на нього наводиться різкість.
Здається мені що у вас, як і у мене немає потреби застосовувати такий ефект для всіх зображень скопом, так що досить створити окремий клас, щоб особливо не мудрувати, наприклад клас .opacity. привласнити його потрібної картинці, і вже в css експериментувати з різними варіаціями однойменного властивості.
Можна обмежитися одним єдиним властивістю opacity регулюючи рівень прозорості в ту чи іншу сторону, а можна додати якусь ілюзію плавності переходу використовуючи універсальну властивість transition з певними значеннями.
Стосовно першого варіанта даного прикладу, я використовував наступні значення:
filter: alpha прописав не випадково, без цього милиці IE8 геть відмовиться обробляти прозорість, так що поки ще сила-силенна народу використовують цей недобраузер, незабутній про примочки. Те ж саме і з префіксами у властивості transition для інших браузерів, єдиної підтримки стандартів поки немає, а значить для надійності вказуємо конкретно)))
У другому варіанті все навпаки, картинка виводиться з легкої прозорістю за замовчуванням, а при наведенні на неї різкість плавно відновлюється. Досягається це, як ви вже напевно здогадалися, простою перестановкою властивостей:
У прикладі, для другого варіанту прописав клас .clarity. так би мовити, що перше спало на думку, особливо на цьому аспекті не зациклюйтеся, тут на що вистачить фантазії, як обізве, з тим і будете працювати))).
На цьому начебто і все. Найпростіший набір властивостей, невеликий стартовий шаблон для створення ще одного чудового ефекту за допомогою CSS3, сподіваюся стане в нагоді кому-небудь, та й самому пам'ять подмолодіть іноді не зайве.
З повагою Андрій.