CSS ефект при наведенні на картинку. Створюємо оригінальні hover-ефекти за допомогою CSS3 Ефект розсувних фонів у html

| 18.02.2016

CSS3 відкриває необмежені можливості перед UI-дизайнерами, і головний плюс полягає в тому, що практично будь-яку ідею можна легко реалізувати та втілити у життя, не вдаючись до використання JavaScript.

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

Для більш детального ознайомлення ви можете завантажити архів із файлами.

Усі ефекти працюють з допомогою властивості transition (англ. transition- «Перехід», «перетворення») і псевдокласу: hover, який визначає стиль елемента при наведенні на нього курсора миші (у нашому підручнику). Для наших прикладів ми використали блок div розміром 500×309 пікселів, вихідний колір фону #6d6d6d та тривалість переходу від одного стану до іншого 0,3 секунди.

Body > div ( width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease; transition: all 0.3s ease; )

1. Зміна кольору під час наведення курсору

Колись реалізація такого ефекту була досить копіткою роботою з математичними обчисленнями певних значень RGB. Зараз досить записати стиль CSS, в якому необхідно додати до селектора псевдоклас:hover і задати фоновий колір, який плавно (за 0,3 секунди) замінить собою вихідний колір фону при наведенні курсору на блок:

Color:hover ( background:#53ea93; )

2. Поява рамки

Цікава та яскрава трансформація – внутрішня рамка, що плавно з'являється при наведенні миші. Добре підійде для оздоблення різних кнопок. Щоб досягти такого ефекту, використовуємо псевдоклас:hover та властивість box-shadow з параметром inset (задає тінь усередині елемента). Крім цього, потрібно задати розтягнення тіні (у нашому випадку це 23px) та її колір:

Border:hover ( box-shadow: inset 0 0 0 23px #53ea93; )

3. Свінг

Дана анімація CSS - виняток, тому що тут властивість transition не використовується. Замість нього ми задіяли:

@keyframes - базова директива для створення покадрової CSS-анімації, яка дозволяє робити т.з. розкадрування та описувати анімацію у вигляді списку ключових моментів;
animation та animation-iteration-count - властивості для завдання параметрів анімації (тривалість та швидкість) та кількості циклів (повторів). У разі повтор 1.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px); transform: translateX(3px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform : translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit-transform: translateX(3px); transform: translateX(3px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) .swing:hover ( -webkit-animation: swing 0.6s ease; animation: swing 0.6s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; )

4. Згасання

Ефект плавного згасання - це, по суті, нормальна зміна прозорості елемента. Анімація створюється в два етапи: спочатку необхідно встановити початковий стан прозорості 1 – тобто повна непрозорість, після чого вказати її значення при наведенні миші – 0.6:

Fade ( opacity: 1; ) .fade:hover ( opacity: 0.6; )

Для протилежного результату поміняйте значення місцями:

5. Збільшення

Щоб при наведенні курсору блок збільшувався, ми скористаємося властивістю transform і задаємо значення scale(1.2) . При цьому блок збільшиться на 20 відсотків із збереженням своїх пропорцій:

Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. Зменшення

Зменшити елемент так само просто, як збільшити. Якщо в п'ятому пункті для збільшення масштабу нам необхідно було вказати значення більше, ніж 1, то для зменшення блоку ми просто вкажемо значення, яке буде менше одиниці, наприклад, scale(0.7). Тепер при наведенні миші блок пропорційно зменшуватиметься на 30 відсотків від свого початкового розміру:

Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )

7. Трансформація у коло

Одна з найчастіше використовуваних анімацій - прямокутний елемент, який при наведенні курсору перетворюється на коло. За допомогою властивості CSS border-radius, використаного в парі з: hover і transition, це можна реалізувати без проблем:

Circle:hover ( border-radius: 70%; )

8. Обертання

Кумедний варіант анімації - поворот елемента на певну кількість градусів. Для цього нам знову знадобиться властивість перетворення, але вже з іншим значенням - rotateZ(20deg). За таких параметрів блок буде повернутий на 20 градусів за годинниковою стрілкою щодо осі Z:

Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )

9. 3D тінь

Думки дизайнерів розходяться в тому, чи доречний цей ефект у флет-дизайні. Тим не менш, ця CSS3 анімація є дуже оригінальною і також використовується на веб-сторінках. Добиватимемося тривимірного ефекту за допомогою вже знайомих нам властивостей box-shadow (створить багатошарову тінь) і transform з параметром translateX(-7px) (забезпечить зсув блоку по горизонталі вліво на 7 пікселів):

Threed:hover (box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px - 6px transform: translateX( -7px);transform: translateX(-7px);

Підтримка браузерами

На сьогоднішній день властивість transition підтримується такими браузерами:

Десктопні браузери
Internet Explorer	Підтримується версією IE 10 та вище
Chrome	Підтримується з версії 26 (до версії 25 працює з префіксом -webkit-)
Firefox	Підтримується з версії 16 (у версіях 4-15 працює із префіксом -moz-)
Opera	Підтримується з версії 12.1
Safari	Підтримується з версії 6.1 (у версіях 3.1-6 працює із префіксом -webkit-)

Інші властивості, використані в даних прикладах, такі як transform, box-shadow і т. д., також підтримуються майже всіма сучасними браузерами. Однак, якщо ви збираєтеся використовувати ці ідеї для своїх проектів, настійно рекомендуємо перевіряти ще раз кросбраузерність.

Сподіваємося, що ці приклади анімації CSS3 були корисними для вас. Бажаємо творчих успіхів!

Hover-ефекти – досить цікава тема для вивчення. Адже їх застосування може зробити ваш сайт більш динамічним та живим. Сьогодні ми розглянемо деякі ефекти для роботи із зображеннями. Кожен приклад має HTML та CSS коди, які ви можете побачити у дії.

Збільшення

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

Ось HTML-код:

"http://lorempixel.com/400/400/people/9" alt ="portrait" > !}

Зверніть увагу, що зображення, яке було використане в прикладі, має розміри 400px на 400px. Тепер давайте подивимося CSS.

/*GROW*/ .grow img ( height : 300px ; width : 300px ; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: 1s ease; transition: all 1s ease; ) .grow img:hover ( width : 400px ; height : 400px ; )

Ми спочатку встановлюємо розмір зображення зооpx на 300px, а потім, коли користувач наводить на нього курсор, збільшуємо до 400px. Оскільки у нас overflow – hidden, це дозволить нам отримати ефект масштабування.

Стиснення

У минулому прикладі ми подивилися, як зображення при наведенні курсору миші збільшується. Розглянемо зворотний ефект. Цей метод в цілому такий самий, тільки цього разу ви почнете з розмірів в 400px і при наведенні курсору зменшите їх на 300 пікселів.

"http://lorempixel.com/400/400/nightlife/4" alt ="city" > !}

/*SHRINK*/ .shrink img ( height : 400px ; width : 400px ; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -all-trans 1s ease; transition: all 1s ease; ) .shrink img:hover ( width : 300px ; height : 300px ; )

Бокове панорамування

У наступному ефекті розмір зображення не змінюється, але при наведенні фотографія переміщається убік. Це хороший спосіб підкреслити рух об'єкта.

"http://lorempixel.com/600/300/sports/8" alt ="kick" > !}

Тут ми використовуємо зображення шириною 600px і висотою лише 300px - ми змінюємо горизонтальне положення фотографії і нам не потрібно застосовувати ефекти до висоти.

/*SIDEPAN*/ .sidepan img ( margin-left : 0px ; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease transition: margin 1s ease; ) .sidepan img:hover ( margin-left : -200px ; )

Для створення ефекту панорамування ми не змінюватимемо розмір зображення, як це робили минулого разу, але замість цього, використовуючи margin, будемо розміщувати зображення ліворуч. Якщо ви хочете, щоб зображення переміщалося праворуч, використовуйте margin-right.

Вертикальне панорамування

Щоб передати ефект руху, будемо використовувати цей ефект ще раз — він також підходить для створення вертикального панорамування.

"http://lorempixel.com/300/600/sports/5" alt = "climb" > !}

/*VERTPAN*/ .vertpan img ( margin-top : 0px ; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; transition: margin 1s ease; ) .vertpan img:hover ( margin-top : -200px ; )

Код практично такий самий, як і минулого разу, тільки тепер замість margin-left ми використовуємо margin-top.

Трансформація

Наступні ефекти динамічніші.

Нахил

Тепер давайте зробимо так, щоб при наведенні на зображення змінювався кут нахилу.

"http://lorempixel.com/300/300/transport/5" alt ="car" > !}

/*TILT*/ .tilt ( -webkit-transition: all 0 .5s ease; -moz-transition: all 0 .5s ease; -o-transition: all 0 .5s ease; -ms-transition: all 0 .5s ese; transition: all 0 .5s ease; ) .tilt :hover ( -webkit-transform: rotate(-10deg) ; -moz-transform: rotate(-10deg) ; -o-transform: rotate(-10deg) ; - ms-transform: rotate(-10deg) ; transform: rotate(-10deg) ; )

Як ви можете бачити, все, що нам потрібно було, — повернути зображення на десять градусів. Просто та ефективно!

Округлення кутів

Коли користувач наводить на зображення, воно починає обертатися, при цьому перетворюючись із кола на квадрат.

"http://lorempixel.com/300/300/nature/5" alt ="beach" > !}

/*MORPH*/ .morph ( -webkit-transition: all 0 .5s ease; -moz-transition: all 0 .5s ease; -o-transition: all 0 .5s ease; -ms-transition: all 0 .5s ease; transition: all 0 .5s ease; ) .morph :hover ( border-radius: 50 % ; -webkit-transform: rotate(360deg); -Moz-transform: rotate(360deg) ; -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg) ; )

Тут встановлений клас morph, який починає обертатися на 360 градусів при наведенні курсору миші на нього, а border-radius поступово змінюватиметься до 50%, внаслідок чого перетвориться на коло.

Фокус

Ось інший спосіб використання border-radius для закруглення зображення. Цього разу, однак, ми не тільки збільшуватимемо border-radius, але і його товщину. У поєднанні з border-box це створить ефект, який фокусується на певній частині зображення.

"http://lorempixel.com/300/300/sports/1" alt ="cricket" > !}

/*FOCUS*/ .focus ( -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; ) .focus :hover ( border : 70px solid # 000 ; border-radius: 50 % ; }

Ми взяли border 10px та перетворили його на 70px чорну рамку у провертанні радіусу до 50%, тому що ми це робили у попередньому прикладі.

Webkit-фільтри

На відміну від наведених вище прикладів, кожен із яких використовує кілька префіксів, щоб забезпечити максимальну сумісність браузера, такі приклади використовують лише префікс WebKit. Дані приклади працюють лише у Safari та Chrome. Незважаючи на обмеження, Webkit фільтри дозволяють виконувати деякі досить дивовижні ефекти! Демо

Розмиття

Перший ефект, який ми застосовуватимемо, — просте розмиття. Тепер розмиття можна досягти за допомогою одного маленького рядка коду.

Перш за все, для тих хто не зовсім ще в темі або зовсім не в темі, коротко поясню, що таке hover-. Це різні види ефектів (підписи, підказки, плавні переходи, трансформація, ротація, збільшення, зміщення і т.д.), що застосовуються до елементів веб-сайту на них курсора миші. Ці реалізовані можуть як за допомогою різних плагінів jQuery, так і на чистому .
Сьогодні я підготував велику добірку оригінальних hover-ефектів для зображень, створених за допомогою CSS3, без підключення javascript-бібліотек. Про переваги та недоліки реалізації hover-ефектів на чистому CSS3 не буду, це інша тема, просто дивіться приклади, і при необхідності використовуйте вподобаний у себе на сайті. Всі ефекти представлені в огляді мають демонстраційний приклад і докладну документацію з вихідними джерелами. Мануали здебільшого буржуїнською, але все більш-менш інтуїтивно зрозуміло.

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

Щоб не ламати загальну картину, не став перекручувати машинним перекладом назви ефектів (за винятком деяких), залишив оригінали заголовків такими, як їх обізвав розробник.

Дуже цікавий ефект при наведенні на мініатюри зображень з використанням тонких ліній у конструкції та друкарні. Декілька різних видів ефектів появи підписів до картинок, м'які і не нав'язливі 3D-перетворення, і плавні переходи псевдо-елементів. Працює лише у сучасних браузерах.

iHover це вражаюча колекція ефектів при наведенні на чистому CSS3, за допомогою Bootstrap 3. Побудований на Scss CSS (файл), легко модифікується змінними. Модульний код, немає необхідності включати в роботу весь файл. 30+ різних ефектів в одному пакеті. Все досить добре документовано, ефекти дуже прості у використанні. Все, що вам потрібно зробити, це правильно побудувати HTML-розмітку та підключити файл CSS до роботи.

Створює кілька простих, але стильних ефектів під час підпису зображень. Ідея полягає в тому, щоб при наведенні на мініатюри отримати ефектну появу заголовка, ім'я автора і кнопки зв'язку. Для деяких ефектів використано візуальні 3D-перетворення.

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

для мініатюр на CSS3

Розробник позиціонує свою роботу, як приклад галереї зображень з ефектами переходів з появою анотацій (підписів) до мініатюр. Заявлено впевнену підтримку сучасними браузерами, включаючи IE 9+. Повноцінною галереєю, звичайно, назвати це складно, а ось ефект появи підписів, досить цікавий.

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

Обертання мініатюр при наведенні

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

Якщо перекласти дослівно: "Сексуальний ефект при наведенні на ". Щось такого сексуального, в цьому ефекті ви звичайно навряд чи помітите, якщо тільки у вас не буйна фантазія, але ефект по своєму цікавий і звернути увагу на нього варто.

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

4 Вигляд ефектів анімації підписів зображень, реалізованих виключно засобами CSS3. Різні позиції з появою та ефекти переходів, цілком собі стандартне виконання. Щоб зрозуміти, як працює анімація, загляньте у вихідний код демо-сторінки, окремої документації не виявив.

Вибудовані в сітку галереї мініатюри з різними ефектами появи підписів, обертання, прояви, спливання і т.д. Документація з використання та налаштування досить мізерна, але за особливого бажання розібратися можна.

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

Ще один набір з 10 hover-ефектів для зображень, різні видозміни мініатюр при наведенні, збільшення, ротація, поворот, затемнення тощо.

Різні ефекти анімації рамки навколо зображень, виглядає досить привабливо, є докладний посібник з налаштування та використання.

Оригінальні hover-ефекти на CSS3, які застосовуються для ефектної появи підписів мініатюр зображень при наведенні. Набір правил CSS містить 10 різних ефектів, які можна використовувати окремо для різних картинок. Ефекти по-справжньому вражають, особливо розуміючи, що це зроблено лише з допомогою CSS3. Детальний посібник, допоможе вам розібратися що до чого.

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

Розсувні зображення

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

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

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

Підпис до зображення з'являється з кута і розширюється на всю площу зображення по діагоналі.

Ще кілька цікавих рішень для реалізації підписів до мініатюр зображень. В онлайн-редакторі ви можете поекспериментувати з параметрами і досягти вражаючих результатів.

Набір красивих ефектів при наведенні на мініатюри, різні види появи та оформлення підписів до картинок. Тонкі лінії в контрасті з трохи затемненим тлом створюють легкі для сприйняття інформаційні блоки.

Химерні форми та ефект збільшення у зв'язці з анімаційним ефектом появи підписів до мініатюр зображень.

Приклад створення візуального слайд-ефекту для виведення об'ємних підписів до зображень з використанням лише CSS3 та HTML5.

6 Підписів до картинок

6 Варіантів появи підписів до картинок при наведенні за допомогою CSS3. Найдокладніший урок з реалізації та налаштування, доступні для завантаження вихідники.

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

Про цей спосіб я розповідав в одному з своїх попередніх уроків: .

Бажаєте розпочати роботу над створенням сайту якнайшвидше? Тепер це цілком можливо! З тієї простої причини, що на маркетплейсі TemplateMonster з'явився новий розділ з . Колекція буде поповнюватися, але і зараз вже можна доглянути щось, що підходить для вашого онлайн-проекту. Все, що вам потрібно зробити – це вибрати своє ідеальне готове рішення та попрацювати із презентацією потрібної інформації. І не забувайте, що текст шаблону був написаний вручну.

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

Насамперед, для тих хто не зовсім ще в темі або зовсім не в темі, коротко поясню, що таке . Це різні види ефектів (підписи, підказки, плавні переходи, трансформація, ротація, збільшення, зміщення тощо), що застосовуються до елементів веб-сайту при наведенні на них курсору миші. Реалізовані ці ефекти можуть за допомогою різних плагінів jQuery, і на чистому .
Сьогодні я підготував велику добірку оригінальних hover-ефектів для зображень, створених за допомогою CSS3, без підключення javascript-бібліотек. Про переваги та недоліки реалізації hover-ефектів на чистому CSS3 не буду, це інша тема, просто дивіться приклади, і при необхідності використовуйте вподобаний у себе на сайті. Всі ефекти представлені в огляді мають демонстраційний приклад і докладну документацію з вихідними джерелами. Мануали здебільшого буржуїнською, але все більш-менш інтуїтивно зрозуміло.