Exore LTD » CSS3 » Набор эффектов при наведении CSS — изображения при наведении CSS
Лого SiteHere.ru

Ноябрь 4, 2019 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

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

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

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

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

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

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

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

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

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

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

Шаг 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!) на выбор, которые вы можете применять на собственном сайте.  

Успехов!

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

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

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

12 комментариев к записи
  • Светлана

    Здравствуйте, Юрий! Ме очень понравился Ваш сайт, sitehere.ru, И сайт сам современный, «резиновый» и информация, не пятилетней давности, и получить, её легко и просто, и изложено всё понятно, и очень чётко всё структурировано, Поле того, как скачала «эффекты при наведении», и сразу пошла знакомится, — кто же автор такого замечательного сайта? С большим интересом прочла вашу историю. Около двух лет в интернете, и вначале даже не понимала, чем отличается статический сайт от динамического, это мне посетитель сказал, что сайт у меня динамический. Сейчас учусь создавать «резиновые» (ссылка на резиновую подписную извините Светлана, но ссылки в комментариях запрещены ) Форма ещё не подключена, это я не себе делаю.

    Буду частенько к Вам заходить. Подписываюсь на вашу рассылку. И дам ссылку на ваш сайт в фэйс-бук. и чуть позже на своём сайте. Успехов Вам. С уважением Светлана Верховская. г. Екатеринбург.

     
    Ответить
    • Юрий

      Спасибо большое, Светлана! Очень приятно читать что материалы на сайте приносят пользу. Буду рад видеть Вас на сайте 🙂 .

       
      Ответить
  • Анастасия

    Рисую себе новый дизайн для блога, так что пришло время выбрать подходящий эффект для миниатюр))
    Хорошо, что много полезного можно найти на одном блоге

     
    Ответить
    • Юрий

      Спасибо, Анастасия. Приятно видеть что Вы находите что-то для себя у меня на сайте 🙂 .

       
      Ответить
  • Александр

    Автору огромное СПАСИБО!!!
    Все работает

     
    Ответить
  • Irina

    большое спасибо Юрий за Вашу щедрость и труд 😎
    несмотря на ваши комментарии что установка простейшая я умудрилась не справиться 😳
    не могли бы Вы мне помочь?

     
    Ответить
  • Lu

    Спасибо огромное за наборы! У меня уже несколько лет как куча закладок с вашего сайта, вот опять пригодилась эта статья 🙂

     
    Ответить
    • Юрий Немец

      Очень рад, что вам пригодилась статья, а также приятно видеть, что сайт приносит пользу посетителям 🙂 .

       
      Ответить
  • Наталья

    За урок респект)))

    Очень помог. Искала эти эффекты очень давно))) Все статьи в закладки добавила.

     

    Юрий, есть у вас курсы (и платные и бесплатные) по сайтостроению? 

     
    Ответить
  • Иван

    Я установил тему!! и почему-то не могу установить фоновую картинку на свой сайт через css !!

    Вот что я вводил при установки фоновое изображение :

    body{
        background-image:url(45.jpg); 
        background-size:cover;
        background-size:100%;
    }

     
    Ответить
    • Юрий Немец

      Иван, вам необходимо указать путь до изображения ОТНОСИТЕЛЬНО файла CSS. Потому что именно внутри его вы вставляете изображение с помощью свойства background-image.

       
      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *