Эффекты при наведении на картинку css: Коллекция потрясающих эффектов для изображений | HTML, CSS и JavaScript (jQuery)

Содержание

Классные эффекты при наведении для WordPress

Здравствуйте друзья!

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

Навигация по статье:

Давайте, сразу вам покажу, как выглядят некоторые из этих эффектов:

Хотите увидеть больше эффектов при наведении? Тогда читайте статью до конца!

Использование данных эффектов, позволит вам произвести впечатление на посетителей вашего сайта и сделает его более интересным и оригинальным.

Для создания подобных эффектов нам понадобится плагин Image Hover Effects CSS3.

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

В данном плагине все необходимые настройки можно осуществлять без покупки платных версий либо каких-то абонементов.

Установка и настройка плагина Image Hover Effects CSS3

1.Нажимаем «Установить» и активируем плагин. После установки данного плагина, в боковом меню страницы, появляется пункт «Hover Effects». Нажимаем на него.
2.И теперь нам нужно будет добавить несколько изображений, для которых мы будем применять наши интересные эффекты. Нажимаем на кнопку «Add New Hover Effect».
3.После чего, нам нужно ввести заголовок для нашей группы изображений. Далее, мы будем добавлять, по очереди, различные изображения, выбирать для них эффекты, задавать размеры, текст описания и т.д.

Вам не обязательно заполнять сразу все поля, для отображения определённого эффекта достаточно выбрать изображение, текст заголовка, описание, а также тип и стиль эффекта. Все остальные настройки вы заполняете по желанию.

4.Выбираем изображения, нажав на кнопку «Media». Загрузка осуществляется при помощи стандартного загрузчика WordPress. Выбираем нужное изображение, нажимаем «Открыть». И теперь нажимаем на кнопку «Select».

При этом обращаю ваше внимание на то, что когда вы подготавливаете изображения которые будут отображаться у вас на сайте в виде кружочков, то вам нужно, что бы картинки были квадратные. Так как если вы загрузите прямоугольные картинки, то у вас получатся не кружочки, а вытянутые эллипсы.

5.В поле «Title» мы можем задать заголовок для нашего изображения, при этом, данный заголовок не будет отображаться на странице, он будет использоваться в теге добавления картинки.
6.С помощью «Alternate text» мы можем добавить атрибут alt, который так же не будет отображаться на сайте, а будет служить скорее для поискового продвижения.
7.В «Caption Title» нам нужно будет ввести заголовок изображения, который будет высвечиваться при наведении на него.
8.Задаем размер шрифта для заголовка в поле «Caption Title Font Size». Задается он в пикселях.
9.В поле «Caption Text» можно задать короткое описание, которое, так же, будет появляться при наведении на изображении, сразу же под заголовком.
10.«Caption Text Font Size» позволяет задать размер шрифта в пикселях для описания.
11.В «Content Color» можно задать цвет шрифта для заголовка и для описания. Задается этот цвет либо при помощи кодовых цветов, либо в шестнадцатеричной системе.
Например: #ffffff или white
Если у вас не применился указанный цвет для текста, значит он перекрывается стилями темы и нужно повысить его приоритет приписав ему правило «!important».
Выглядеть это будет так:
12.В поле «Title Background Color» мы можем задать цвет фона для заголовка. Цвет задаётся так же в шестнадцатеричной системе.
13.С помощью «Background Color» мы задаем цвет для всего блока с текстом, который появляется при наведении на изображение.

14.Поле «Border Width» позволяет задать толщину линии границы.
15.В поле «Border color» мы можем выбрать цвет границы.
16.В поле «Link To» мы можем ввести ссылку, при нажатии на которую, будет осуществляться переход на нужную нам страницу.
17.В «Target Link» вы можете задать атрибут, который позволит открывать страницу либо в отдельном окне, либо в этом же. По умолчанию стоит атрибут «_blank», который будет открывать ссылку в новом окне.

А дальше начинается самое интересное.

18.В поле «Hover Style» вы можете выбрать один из нескольких эффектов. Всего здесь 18 эффектов, и при этом вы еще можете выбрать стиль эффекта в свойстве
«Style Type». Они у вас могут быть для прямоугольных картинок, либо со скругленными углами, т. е. «Square» и «Circle», соответственно.
Перейдя по ссылке, вы сможете просмотреть все эффекты анимации, которые доступны в данном плагине. При этом вы сможете выбрать тот, который вам понравиться больше всего и задать этот эффект в настройках вашего сайта.
Эффекты для скруглённых изображений
Эффекты для прямоугольных изображений
19.При помощи настройки «Caption Direction» мы можем задавать направление, откуда у нас будет выезжать текст названия и описания. Т.е. это может быть: слева на право, справа налево, сверху вниз и снизу вверх.
После того как мы задали все настройки, нажимаем на кнопку «Add New». После чего происходит копирование секции с добавлением изображения и здесь нужно будет задать параметры для следующего изображения.
Далее выбираем следующую картинку, задаем для нее атрибут «Caption Title», добавляем описание, выбираем тип эффекта и стиль анимации и так далее.
Таким образом, мы можем добавлять столько изображений, сколько нам нужно.
20.После того как все изображения добавлены, Нажимаем на кнопку «Опубликовать».

Вставка изображений с эффектом при наведении на страницу

Вставка данной группы изображений будет осуществляться при помощи шорткода. Данный шорткод мы можем скопировать из блока в правой части страницы.

Далее, мы можем вставить его на нужную страницу, в запись, либо вывести в виджете или же, где-то в шаблоне.

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

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

Редактирование эффектов при наведении

Если какой то из эффектов вас не устраивает, то вы в любой момент можете изменить его параметры. Для этого переходим в раздел «Hover Effects», наводим курсор на название той группы изображений, которая вам нужна и нажимаем на ссылку «Изменить».

Так же вы можете менять изображения местами, путем перетаскивания их вверх или вниз.

После внесения всех необходимых изменений, нажимаем на кнопку «Обновить».

Видеоинструкция

<center><ins class="lazy lazy-hidden adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="8813674614"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center>

Как видите, при помощью этого плагина, можно с легкостью создавать интересные эффекты при наведении для изображений. И для этого даже не нужно лезть в код!

Если вам понравилась данная статья, и вы хотели бы узнать больше о плагинах которые позволяют создавать подобные анимации, обязательно делитесь ею в соцсетях и пишите комментарии.

Подписывайтесь на мою рассылку и на мой канал YouTube. До встречи!

С уважением Юлия Гусарь

10 интересных эффектов при наведении для ссылок

Здравствуйте, дорогие читатели!

В этой статье, я вам дам несколько готовых примеров интересных эффектов при наведении для ссылок.

Данные эффекты создаются исключительно средствами CSS3 и основываются на использовании псевдоклассов и псевдоэлементов.

Примеры всех этих эффектов Вы можете посмотреть перейдя по ссылке ниже:

Навигация по статье:

Что нужно сделать для использования эффектов при неведении на своём сайте?

1.Скачать вот этот архив, в котором находится 2 css файла и страница с примером.
2.Загрузите файл hover-effects.css на свой сайт в папку «CSS», которая находится в папке с темой. Если такой папки у вас нет, то создайте её.
Для сайта на WordPress эта папка находится по адресу:
wp-content/themes/Название темы
3.Подключить загруженный CSS файл со стилями для эффектов при наведении в шапке сайта перед закрытием.
Для сайта на WordPress это необходимо сделать в шаблоне header.php, который находится в папке с темой.
4.Для подключения скрипта используйте код:
<link href=»путь к папке с темой/css/hover-effects. css» rel=»stylesheet»>
<link href=»путь к папке с темой/css/hover-effects.css» rel=»stylesheet»>
Полный путь к файлу у вас должен выглядеть примерно так:
<link href=»http://site.ru/wp-content/themes/impulsweb/css/hover-effects.css» rel=»stylesheet»>
<link href=»http://site.ru/wp-content/themes/impulsweb/css/hover-effects.css» rel=»stylesheet»>
Однако в WordPress есть специальная php-функция bloginfo, которая позволяет автоматически определять путь к папке с темой.
С её использованием данный код будет выглядеть так:
<link href=»<?php bloginfo(‘template_directory’) ?>/css/hover-effects.css» rel=»stylesheet»>
<link href=»<?php bloginfo(‘template_directory’) ?>/css/hover-effects.css» rel=»stylesheet»>
5. Для применения определённого эффекта используем такой код:
<div> <a href=»#»>Ссылка 1</a> <a href=»#»>Ссылка 2</a> <a href=»#»>Ссылка 3</a> </div>
<div>
<a href=»#»>Ссылка 1</a>
<a href=»#»>Ссылка 2</a>
<a href=»#»>Ссылка 3</a>
</div>
При этом вместо iw-effect-2 пишем название класса того эффекта, который вам понравился.

Сами примеры и названия их классов можно посмотреть на этой странице:

Данный эффект при наведении применится ко всем ссылкам, которые есть у внутри блока с классом he-nav.

Важно! Если в вашей теме уже используются какие то стили для псевдоэлементов before и after то данные эффекты могут работать некорректно. Это связано с тем, что стили конфликтуют между собой.

Если такое случилось, но вам очень хочется применить эти эффекты, то попробуйте закомментировать в файле style. css вашей темы все стили, которые связаны с псевдоэлементами before и after.

Редактирование стилей эффектов при наведении

Если вам нужно изменить цвет самой ссылки или элементов подчёркивания, то нужно:

1.Открыть для редактирования файл hover-effects.css, который мы ранее загружали.
2.Найти там класс, который вы использовали, например iw-effect-3
3.Для изменения цвета ссылки ищем среди всех CSS-свойств для данного класса свойство color: и меняем там цвет на нужный. Более подробно о форматах задания цветов и кодировках их значений я писала в этой статье.
4.Если вам нужно изменить цвет элементов при наведении, то вам нужно искать свойство background: для псевдоэлементов before и after, находящихся в этом же классе.

Если вам понравились эти эффекты, то обязательно поделитесь ссылкой на данную статью в соцсетях. Так вы дадите мне понять, что статья была полезной и нужно ещё писать что то подобное 🙂

Так же буду рада видеть ваши комментарии!

На сегодня у меня всё! Удачи вам с применением данный эффектов при наведении! Хорошего вам дня и до скорых встреч!

С уважением Юлия Гусарь

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

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

Смотрите 30 вариантов эффектов по ссылке ниже:

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

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

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

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

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

Сейчас нужно открыть файл index.html (если вам понравился эффект из первого набор) или index2.html (если из второго) и найти в HTML коде тег <h3>Вариант НОМЕР</h3>, где НОМЕР — это понравившийся вам вариант. Затем скопировать всё, что ниже это тега, то есть блок <div> и классом grid. Вот какой получился у меня:

<div>
    <figure>
        <img src="img/12. jpg" alt="img12"/>
        <figcaption>
            <div>
                <h3>Ваш <span>заголовок</span></h3>
                <p>Подробное описание</p>
            </div>
            <a href="#">Подробнее</a>
        </figcaption>			
    </figure>
    <figure>
        <img src="img/1.jpg" alt="img1"/>
        <figcaption>
            <div>
                <h3>Ваш <span>заголовок</span></h3>
                <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

.container {

position: relative;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

width: 33.33333333%;

height: 50vh;

overflow: hidden;

background: #000;

}

.container:hover h2 {

opacity: 1;

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

.container:hover .photo {

-webkit-filter: grayscale(80%) blur(8px);

filter: grayscale(80%) blur(8px);

}

. container h2 {

position: relative;

opacity: 0;

-webkit-transform: translateY(40px);

transform: translateY(40px);

-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;

transition: opacity 0.4s, -webkit-transform 0.4s;

transition: opacity 0.4s, transform 0.4s;

transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;

color: #fff;

text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);

}

.container .photo {

position: absolute;

top: -1rem;

left: -1rem;

right: -1rem;

bottom: -1rem;

background-size: cover;

background-position: center center;

background-repeat: no-repeat;

-webkit-filter: grayscale(80%) blur(0px);

filter: grayscale(80%) blur(0px);

-webkit-transition: -webkit-filter 0.4s ease-out;

transition: -webkit-filter 0.4s ease-out;

transition: filter 0.4s ease-out;

transition: filter 0.4s ease-out, -webkit-filter 0.4s ease-out;

}

. container .photo.photo1, .container .photo.photo5 {

}

.container .photo.photo2, .container .photo.photo6 {

}

.container .photo.photo3, .container .photo.photo4 {

}

Всплывающая картинка при наведении на ссылку

Здравствуйте, друзья! На моем блоге уже есть информация о всплывающих подсказках на CSS, но сегодня будем делать еще более интересный эффект, это всплывающие картинки при наведении курсора. Этот эффект имеет достаточно широкое применение, но я все чаще замечаю подобное на интернет-магазинах, где при наведении на название товара, появляется его изображение или же увеличение картинки при наведении. Конечно такие эффекты можно разнообразить с использованием JavaScript или jQuery, но мы с вами воздержимся от всевозможных скриптов и будем делать всплывающие картинки только на CSS. Надеюсь, что вы уже знаете, что такое псевдокласс hover. Вот Его-то мы и будем использовать в наших всплывающих картинках и вот, что у нас должно получится.

Мои откровения в телеграме
Демо

Первое, что нужно сделать, это добавить в файл стилей следующий код:

.tooltip span{
    border-radius: 5px 5px 5px 5px;
    visibility: hidden;
    position: absolute;
    left: 200px;
    background: #fff;
    box-shadow: -2px 2px 10px -1px #333; 
    border-radius: 5px;	
}
 
.tooltip:hover span{
visibility: visible;
}

.tooltip span{ border-radius: 5px 5px 5px 5px; visibility: hidden; position: absolute; left: 200px; background: #fff; box-shadow: -2px 2px 10px -1px #333; border-radius: 5px; } .tooltip:hover span{ visibility: visible; }

Теперь, к ссылкам нужно прописать класс tooltip и в теге span разместить ссылку на картинку. Выглядит это вот так:

<a href="#">Анкор ссылки<span><img src="image.png"/></span></a>

<a href=»#»>Анкор ссылки<span><img src=»image.png»/></span></a>

С абсолютным позиционированием могут возникнуть проблемы, если вы делаете эффект всплывающих изображений к разным элементам на странице. Картинки могут всплывать не в том месте, где вам нужно. Но это вполне поправимо и можно исправить при помощи отступов. Ну вот, теперь вы знаете как сделать увеличение картинки при наведении мыши с помощью CSS. Используйте данный код для экспериментов, возможно что-то интересное у вас все же получится. при помощи CSS еще можно сделать таблицу зебру. Все вопросы о том, куда вставлять код и т.п. — писать в комментариях. 🙂 А еще я попрошу вас поделиться этой записью в социальных сетях. Заранее благодарю.

интересные эффекты и новые возможности

В CSS3 предусмотрено очень много интересных эффектов. Данная статья посвящена эффектам анимации hover

В этой статье приведено 10 распространенных эффектов анимации на чистом CSS, которые украсят и освежат любой сайт. К тому же сделать их может любой новичок.

Ниже будут подробно рассмотрены следующие эффекты:

1. Крутящийся элемент

2. Дрожащий / дергающийся элемент (анимация Tada)

3. «Падающая» иконка

Текст кнопки

4. Выезжающая иконка

Текст кнопки

5. Выезжающая иконка как на CoolWebMasters

6. Кнопка с бликом

Текст ссылки

7. Кнопка с увеличивающимся внутренним border

Текст ссылки

8. Качающаяся кнопка (анимация Swing)

Я качаюсь

9. Двойной текст с использованием data-hover

10. Выезжающий текст снизу с использованием data-hover

1. Крутящийся элемент

Хорошо подходит для маленьких элементов типа закрывающего крестика или стрелочки. На текстовые ссылки такое, конечно, вешать не надо.

Пример:

Разметка здесь очень простая:

1	<div>Х</div>

CSS:

.my-el {
   border: 1px solid rebeccapurple;
   cursor: pointer;
   background: rgb(219, 199, 199);
   width: 17px;
   height: 17px;
   text-align:center;
   font-size: 14px;
   font-family: Arial;
   font-weight: bold;
   opacity: 0.6;
   z-index: 100;
   cursor: pointer;
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 600ms;
  -moz-transition: all 600ms;
  -o-transition: all 600ms;
  transition: all 600ms;
}
.my-el:hover {
  opacity: 1;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg));
}

Непосредственно за кручение отвечает свойство transform, все остальное — украшательства (еще в этом примере плавно меняется значение прозрачности opacity).

2. Дрожащий / дергающийся элемент (анимация Tada)

Часто такую анимацию вешают на иконки соцсетей и другие небольшие элементы. А выглядит это вот так:

Верстка здесь такая же, как в предыдущем примере:

1	<div>Х</div>

А в css нужно написать не только свойства этого div, но и саму анимацию:

.my-el2 {
border: 1px solid rebeccapurple;
   background: rgb(219, 199, 199);
   width: 17px;
   height: 17px;
   text-align:center;
   font-size: 14px;
   font-family: Arial;
   font-weight: bold;
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   -o-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-timing-function: ease;
   -moz-animation-timing-function: ease;
   -o-animation-timing-function: ease;
   animation-timing-function: ease; 
}
 
.my-el2:hover {
  -webkit-animation-name: Tada;
  -moz-animation-name: Tada;
  -o-animation-name: Tada;
  animation-name: Tada;
}
 
@-webkit-keyframes Tada {
    0% {
        -webkit-transform:scale(1)
    }
    10%, 20% {
        -webkit-transform:scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform:scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -webkit-transform:scale(1.1) rotate(-3deg)
    }
    100% {
        -webkit-transform:scale(1) rotate(0)
    }
}
@-moz-keyframes Tada {
    0% {
        -moz-transform:scale(1)
    }
    10%,20% {
        -moz-transform:scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -moz-transform:scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -moz-transform:scale(1.1) rotate(-3deg)
    }
    100% {
        -moz-transform:scale(1) rotate(0)
    }
}
@-o-keyframes Tada {
    0% {
        -o-transform:scale(1)
    }
    10%,20% {
        -o-transform:scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -o-transform:scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -o-transform:scale(1.1) rotate(-3deg)
    }
    100% {
        -o-transform:scale(1) rotate(0)
    }
}
@keyframes Tada {
    0% {
        transform:scale(1)
    }
    10%, 20% {
        transform:scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        transform:scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        transform:scale(1.1) rotate(-3deg)
    }
    100% {
        transform:scale(1) rotate(0)
    }
}

3. «Падающая» иконка

Пример:

Текст кнопки

Верстка этого элемента состоит из внешнего элемента А со SPAN внутри, который содержит иконку в качестве background:

1	<a><span></span>Текст кнопки</a>

CSS:

.my-button {
    overflow:hidden;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    background: green;
    padding: 0 10px;
    color: white;
    text-decoration: none;
    font-family: arial;
    cursor: pointer;
 }
 
.icon-block {
    position: relative;
    background: url('http://ktvd.ru/wp-content/uploads/phone.png') top left no-repeat;
    width: 15px;
    height: 15px;
    display: block;
    float: left;
    margin:7px 7px 0 0;
 
}
.my-button:hover .icon-block {
    -webkit-animation: anim 0.6s linear 0s 1;
	-moz-animation: anim 0.6s linear 0s 1;
	-o-animation: anim 0.6s linear 0s 1;
    animation: anim 0.6s linear 0s 1;   
	}
 
  @-webkit-keyframes anim {
 0%{top:13px;opacity:1}
    30%{top:5px;opacity:1}
    60%{top:70px;opacity:1}
    70%{top:70px;opacity:0}
    80%{top: -50px;opacity:0}
    100%{top:13px;opacity:1}
}
@-moz-keyframes anim {
 0%{top:13px;opacity:1}
    30%{top:5px;opacity:1}
    60%{top:70px;opacity:1}
    70%{top:70px;opacity:0}
    80%{top: -50px;opacity:0}
    100%{top:13px;opacity:1}
}
@-o-keyframes anim {
 0%{top:13px;opacity:1}
    30%{top:5px;opacity:1}
    60%{top:70px;opacity:1}
    70%{top:70px;opacity:0}
    80%{top: -50px;opacity:0}
    100%{top:13px;opacity:1}
}
 
@keyframes anim {
0%{top:13px;opacity:1}
    30%{top:5px;opacity:1}
    60%{top:70px;opacity:1}
    70%{top:70px;opacity:0}
    80%{top: -50px;opacity:0}
    100%{top:13px;opacity:1}
}

Как видно из примера, анимация происходит вследствие изменения значения top у блока с иконкой. У внешнего блока нужно обязательно указывать overflow: hidden, так как иконка уезжает за его пределы.

4. Выезжающая иконка

Пример:

Текст кнопки

Здесь тот же принцип, что и в предыдущем примере, – анимируется положение иконки внутри ссылки при наведении на нее. Только верстка немного изменена — иконка задается как background к псевдоэлементу :before.

1	<a href="#"><span>Текст кнопки</span></a>

CSS:

.btn2 {
    overflow: hidden;
    background: rgb(176, 12, 12);
    color: white;
    height: 35px;
    line-height: 35px;
    width: 130px;
    display: block;
    text-align:center;
    font-family: arial;
    font-size: 16px;
    text-decoration: none;
    position: relative;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }
.btn2:before {
    content: '';
    background: url('http://ktvd.ru/wp-content/uploads/phone.png') top left no-repeat;
    width: 15px;
    height: 15px;
    display: inline-block;
    position: absolute;
    top:6px;
    left:-20px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
.btn2:hover:before {
   left:6px; 
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
  .btn2 span {
   margin-left: 0; 
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;    
}
 
.btn2:hover span {
    margin-left: 10px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

Внешний элемент .btn2 должен иметь position: relative, так как блок с иконкой спозиционирован абсолютно. Также есть небольшая анимация margin на span с текстом внутри .btn2 (.btn2:hover span), которая отодвигает его при появлении иконки.

5. Выезжающая иконка как на CoolWebMasters

Пример:

Анимация достигается за счет изменения background-position элемента. Нужно подготовить картинку с двумя состояниями иконки:

И верстка:

1	<a href="#"></a>

CSS:

.btn3 {
  background-image: url('http://ktvd.ru/wp-content/uploads/phone-i.jpg');
  background-position: 0 0;
  width: 40px;
  height: 40px;
  display: block;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; 
}
 
.btn3:hover {
  background-position: 40px 0; 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; 
}

6. Кнопка с бликом

Пример:

Текст ссылки

Блик делается через псевдоэлемент :after, который повернут на 35 градусов.

Верстка совсем простая, достаточно присвоить ссылке класс:

1	<a href="#">Текст ссылки</a>

.btn4 {    
  background: green;   display: inline-block;
  padding: 10px;
  position: relative;
  color: white;
  text-decoration: none;
  font-family: arial;
  border-radius: 5px;
  overflow: hidden;
} 
.btn4:after {
  content: '';
  width: 45px;
  height: 95px;
  display: block;
  background: rgba(194, 194, 194, 0.2);
  right: -100px;
  position: absolute;
  top: -24px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotate(35deg);
  -moz-transform-origin: 0 0;
  -moz-transform: rotate(35deg);
  -ms-transform-origin: 0 0;
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;  
} 
.btn4:hover:after {
  right: 10px;   
}

7. Кнопка с увеличивающимся внутренним border

Текст ссылки

Здесь внутренний border сделан через inset text-shadow, которая и анимируется.

Верстка:

1	<a href="#">Текст ссылки</a>

CSS для анимации здесь такой:

.btn5 {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
.btn5:hover {
  box-shadow: inset 0 0 0 30px #53a7ea;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

8. Качающаяся кнопка (анимация Swing)

Выглядит это вот так:

Я качаюсь

Верстка здесь такая же, как в предыдущем примере, только ссылке задан класс btn6. В CSS нужно прописать стиль для :hover и саму анимацию swing.

.btn6:hover {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
 
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation-name: swing;
  -moz-animation-name: swing;
  -o-animation-name: swing;
  animation-name: swing;
}
 
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
  }
 
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
  }
 
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
  }
 
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
  }
 
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
  }
}
 
@-moz-keyframes swing {
  20% {
    -moz-transform: rotate3d(0, 0, 1, 15deg);
  }
 
  40% {
    -moz-transform: rotate3d(0, 0, 1, -10deg);
  }
 
  60% {
    -moz-transform: rotate3d(0, 0, 1, 5deg);
  }
 
  80% {
    -moz-transform: rotate3d(0, 0, 1, -5deg);
  }
 
  100% {
    -moz-transform: rotate3d(0, 0, 1, 0deg);
  }
}
 
@-o-keyframes swing {
  20% {
    -o-transform: rotate3d(0, 0, 1, 15deg);
  }
 
  40% {
    -o-transform: rotate3d(0, 0, 1, -10deg);
  }
 
  60% {
    -o-transform: rotate3d(0, 0, 1, 5deg);
  }
 
  80% {
    -o-transform: rotate3d(0, 0, 1, -5deg);
  }
 
  100% {
    -o-transform: rotate3d(0, 0, 1, 0deg);
      }
}
 
 
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
 
  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
 
  60% {
     transform: rotate3d(0, 0, 1, 5deg);
  }
 
  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
 
  100% {
     transform: rotate3d(0, 0, 1, 0deg);
  }
}

9. Двойной текст с использованием data-hover

А вот еще один интересный эффект, который подойдет к текстовым ссылкам на цветном фоне:

В верстке этого элемента добавился атрибут data-hover, который содержит текст, прилетающий при наведении.

1	<a href="#" data-hover="Моя ссылка">Моя ссылка</a>

В CSS анимируется псевдоэлемент before, в который и передается текст из data-hover:

.btn7:hover:before {
  -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  opacity: 1;
}
 
.btn7:before {
  color: white;
  content: attr(data-hover);
  position: absolute;
  opacity: 0;
  text-shadow: 0 0 1px rgba(255,255,255,0.3);
  -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  pointer-events: none;
}

10. Выезжающий текст снизу с использованием data-hover

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

В верстке внутрь ссылки нужно вставить span.

1	<a href="#"><span data-hover="Моя ссылка">Моя ссылка</span></a>

СSS:

.btn8 {
  padding: 0 30px;
  height: 1.2em;
  overflow: hidden;
  font-size: 20px;
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: white;
  font-family: arial;
} 
.btn8 span {
  position: relative;
  padding: 0 5px;
  display: inline-block;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
} 
.btn8 span:before {
  position: absolute;
  width: 100%;
  color: rgb(8, 120, 213);
  left: 0;
  top: 100%;
  content: attr(data-hover);
  font-weight: 700;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
} 
.btn8:hover span {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}

10 CSS Card Hover Effects

Коллекция бесплатных HTML и CSS-эффектов наведения карты примеров кода.

CSS-карты
Карточки блога CSS
Макеты карт CSS
Флип-карты CSS
Карты материального дизайна CSS
Видеокарты CSS
Кредитные карты CSS
Карты продуктов CSS
Карты профиля CSS
Карты рецептов CSS
Визитные карточки CSS

Автор

Эндрю Симс
3 декабря 2018 г.

О коде

Эффекты наведения карты

Эксперименты с эффектом наведения карточки в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Рафаэла Лукас
12 ноября 2018 г.

О коде

Информационные карточки CSS

информационных карточек CSS с эффектом наведения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Card Hover

Эффект наведения карточки с социальными значками и формами на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Сделано с

HTML (мопс) / CSS (стилус)

О коде

Эффект наведения карты

Эффект наведения карты HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Ангел Давцев
14 декабря 2017 г.

О коде

Переход карты

Эффект наведения для карточки с переходом CSS .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Mojtaba Seyedi
24 сентября 2017 г.

Сделано с

HTML / CSS (SCSS) / JavaScript

О коде

Карточный домик

Поиграйте с классными функциями CSS, такими как настраиваемые свойства, фильтры, отсечение и… 20 эффектов наведения для карты в HTML, CSS и немного JS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: anime.js

Автор

ЯрославW
17 сентября 2017 г.

О коде

Эффект наведения карты

Простой эффект наведения карты в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Хорхе Санес
24 января 2017 г.

О коде

Card Hover

Эффект наведения карты на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Зе Батейра
12 декабря 2015 г.

О коде

Эффект желе в карточке при наведении курсора

Эффект желе в карточке при наведении курсора в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Карточка материала с анимированным изображением

Экспериментируйте с материальным дизайном. Анимирует изображение и заголовок, а при наведении курсора добавляет кнопку.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

CSS: селектор наведения

Пример

Выбор и стиль ссылки при наведении на нее курсора:

а: парение {
цвет фона: желтый;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Селектор : hover используется для выбора элементов при наведении на них указателя мыши.

Совет: Селектор: hover можно использовать для всех элементов, а не только по ссылкам.

Совет: Используйте селектор: link для стилизации ссылок на непосещенные страницы, селектор: посещенный для стиля ссылки на посещенные страницы, и : активный селектор для стилизации активной ссылки.

Примечание: : hover ДОЛЖЕН стоять после: link и: loaded (если они присутствуют) в определении CSS, чтобы быть эффективным!