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

Минулий місяць був пов`язаний з уроками про можливості CSS3. На якийсь час залишимо ті уроки і хочу вам показати готові «фішки», які потрібно лише взяти і застосувати на своєму сайті. Сподіваюся ви знаєте таку фразу «Простота - запорука успіху». Я її почув давно від одного дизайнера і вона сильно мені запам`яталася, але раніше я не надавав їй значення. А зараз прекрасно розумію, що чим простіше дизайн сайту (ну не прям білий аркуш, хоча і тут потрібно дивитися # 128521; ), Тим простіше відвідувачам розібратися що і де знаходиться. У зв`язку в с цим ми розглянемо ефекти при наведенні CSS.

Мені дуже подобаються такі ефекти. Дивіться 30 варіантів ефектів по посиланню нижче:

Подивитися прімерСкачать

Всі статті, які зв`язку з ефектами при наведенні CSS на моєму сайті, які я писав раніше:

Відео: HTML & CSS - простий ефект при наведенні

• CSS3 бібліотека - 40+ ефектів при наведенні
• Приголомшливі ефекти CSS3 при наведенні
• Оригінальний ефект CSS3 при наведенні на ...

Установка по кроках

Наприклад мені сподобався перша варіант з першого набору.

Детальніше

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

Крок 1 - HTML при наведенні

Зараз потрібно відкрити файл index.html (Якщо вам сподобався ефект з першого набір) або index2.html (Якщо з другого) і знайти в HTML коді тег Варіант НОМЕР, де НОМЕР - це вподобаний вам варіант.

Потім скопіювати все, що нижче це тега, тобто блок і класом grid. Ось який вийшов у мене:

12345678910111213141516171819202122

lt;div class="Grid"gt;
class="Effect-lily"gt;lt;img src="Img / 12.jpg" alt="Img12"/gt;lt;divgt;lt;h2gt; Ваш lt;spangt; заголовокlt;/spangt; lt;/h2gt;lt;pgt; Детальний описlt;/pgt;lt;/divgt;lt;a href="#"gt; Детальнішеlt;/agt;lt;/figcaptiongt;lt;/figuregt;
class="Effect-lily"gt;lt;img src="Img / 1.jpg" alt="Img1"/gt;lt;divgt;lt;h2gt; Ваш lt;spangt; заголовокlt;/spangt; lt;/h2gt;lt;pgt; Детальний описlt;/pgt;lt;/divgt;lt;a href="#"gt; Детальнішеlt;/agt;lt;/figcaptiongt;lt;/figuregt;lt;/divgt;

Зараз у нас є структура. Залишилося підключити необхідні стилі.

Крок 2 - CSS

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

вибираєте:

між тегами підключаємо обраний CSS файл:

Відео: Класні ефекти при наведенні для WordPress

1

lt;link href="Css / set1.css" rel="Stylesheet" type="Text / css" /gt;

Але це ще не все! Так як в декількох прикладах є іконки, а я думаю і вони вам також сподобаються. Щоб з`явилися іконки, вам необхідно скопіювати папку font-awesome-4.2.0 в папку fonts вашої теми. А потім підключити між тегами :

1

lt;link href="Fonts / font-awesome-4.2.0 / css / font-awesome.min.css" rel="Stylesheet" type="Text / css" /gt;

Це найпростіша установка, що тільки може бути. Упевнений - ви впораєтеся!

висновок

Ці ефекти мне нравятся більше, ніж просто зміна кольору при наведенні на посилання. Але тут справа смаку. Цей набір ефектів при наведенні CSS дає вам безліч варіантів (30!) На вибір, які ви можете застосовувати на власному сайті.

Успіхів!

джерело: оригінал

З повагою, Юрій Німець