X
Юрий Немец

Набор эффектов при наведении CSS — изображения при наведении CSS

Прошлый месяц был связан с уроками о возможностях CSS3. На какое-то время оставим те уроки и хочу вам показать готовые «фишки», которые нужно лишь взять и применить на своём сайте. Надеюсь вы знаете такую фразу «Простота — залог успеха». Я ее услышал давно от друга дизайнера и она сильно мне запомнилась, но раньше я не придавал ей значения. А сейчас прекрасно понимаю, что чем проще дизайн сайта (ну не прям белый лист, хотя и здесь нужно смотреть 😉 ), тем проще посетителям разобраться что и где находится. В связи в с этим мы рассмотрим эффекты при наведении CSS. Мне очень нравятся такие эффекты. Смотрите 30 вариантов эффектов по ссылке ниже:

Посмотреть примерСкачать

Все статьи, которые связи с эффектами при наведении CSS на моём сайте, которые я писал раньше:

Установка по шагам

К примеру мне понравился первый вариант из первого набора.

Ваш заголовок

Подробное описание
Подробнее

Ваш заголовок

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

Шаг 1 — HTML при наведении

Сейчас нужно открыть файл index.html (если вам понравился эффект из первого набор) или index2.html (если из второго) и найти в HTML коде тег <h2>Вариант НОМЕР</h2>, где НОМЕР — это понравившийся вам вариант. Затем скопировать всё, что ниже это тега, то есть блок <div> и классом grid. Вот какой получился у меня: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="grid">
    <figure class="effect-lily">
        <img src="img/12.jpg" alt="img12"/>
        <figcaption>
            <div>
                <h2>Ваш <span>заголовок</span></h2>
                <p>Подробное описание</p>
            </div>
            <a href="#">Подробнее</a>
        </figcaption>			
    </figure>
    <figure class="effect-lily">
        <img src="img/1.jpg" alt="img1"/>
        <figcaption>
            <div>
                <h2>Ваш <span>заголовок</span></h2>
                <p>Подробное описание</p>
            </div>
            <a href="#">Подробнее</a>
        </figcaption>			
    </figure>
</div>
Сейчас у нас есть структура. Осталось подключить необходимые стили.

Шаг 2 — CSS

Это второй и последний шаг, который вам нужно сделать. В зависимости от того из какого набора эффект вам понравился, необходимо взять подключить CSS файл. Выбираете:
set1.cssесли понравился первый набор.
set2.cssесли понравился второй набор.
Между тегами <head></head> подключаем выбранный CSS файл: 
1

<link href="css/set1.css" rel="stylesheet" type="text/css" />
Но это еще не всё! Так как в нескольких примерах есть иконки, а я думаю и они вам также понравятся. Чтобы появились иконки, вам необходимо скопировать папку font-awesome-4.2.0 в папку fonts вашей темы. А затем подключить между тегами <head></head>: 
1

<link href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
Это самая простая установка, что только может быть. Уверен — вы справитесь!

Вывод

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

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Категории: CSS3