Разное

Hover эффект при наведении на картинку: Hover-эффекты для изображений – Интересные hover эффекты: для изображений, кнопок, ссылок

12.09.2017
Оригинальные hover-эффекты для изображений на чистом CSS3

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

Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

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

Содержание

Hover Effect Ideas

Очень интересный эффект при наведении на миниатюры изображений, с использованием тонких линий в конструкции и типографии. Несколько различных видов эффектов появления подписей к картинкам, мягкие и не навязчивые 3D-преобразования, и плавные переходы псевдо-элементов. Работает только в современных браузерах.
 


 

iHover

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


 

Caption Hover Effects

Создаёт несколько простых, но стильных эффектов при наведении для подписей изображений. Идея заключается в том, чтобы при наведении на миниатюры, получить эффектное появление заголовка, имя автора и кнопки связи. Для некоторых эффектов использованы визуальные 3D-преобразования.
 


 

Эффект перехода CSS3

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


 

Hover-эффекты для миниатюр на CSS3

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


 

Circle Hover Effects

Очередной набор правил CSS, для создания впечатляющих эффектов преобразований при наведении на абсолютно круглые миниатюры. Пакет содержит 7 видов переходов CSS3, очень подробная документация по настройке и использованию. Эффекты поддерживаются всеми современными браузерами.
 


 

Вращение миниатюр при наведении

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


 

Sexy Image Hover Effects

Если перевести дословно:»Сексуальный эффект при наведении на изображения». Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.
 


 

5 Hover-эффектов на CSS3

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


 

Анимация подписей изображений

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


 

Hover-эффекты с элементами анимации

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


 

Изменение яркости картинок

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


 

10 Image Hover Effects

Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.
 


 

Border Animation Effect

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


 

Original Hover Effects With CSS3

Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.
 



 

Shape Hover Effect

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


 

Раздвижные изображения

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


 

Slick CSS3 Animated Image

С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.
 


 

Всплывающая подпись при наведении

Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.
 


 

Диагональное появление подписи

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


 

Анимированные заголовки миниатюр

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


 

Подчёркнутые или очерченные подписи к миниатюрам

Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.
 


 

Причудливые формы и zoom-эффект

Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.
 


 

Слайд-эффект для подписей изображений

Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только CSS3 и HTML5.
 


 

6 Подписей к картинкам

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


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

 
Об этом способе я рассказывал в одном из предыдущих своих уроков: Тынц.
 


 
Хотите приступить к работе над созданием сайта как можно быстрее? Теперь это абсолютно возможно! По той простой причине, что на маркетплейсе TemplateMonster появился новый раздел с HTML шаблонами на русском языке. Коллекция будет пополняться, но и сейчас уже можно присмотреть что-то подходящее для вашего онлайн-проекта. Все, что вам нужно сделать — это выбрать свое идеальное готовое решение и поработать с презентацией нужной информации. И не забывайте, что текст для шаблона был написан вручную.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Hover-эффекты для изображений на чистом CSS3

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

Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

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

Hover Effect Ideas

Hover Effect Ideas

Hover Effect Ideas

Очень интересный эффект при наведении на миниатюры изображений, с использованием тонких линий в конструкции и типографии. Несколько различных видов эффектов появления подписей к картинкам, мягкие и не навязчивые 3D-преобразования, и плавные переходы псевдо-элементов. Работает только в современных браузерах.


 

iHover

iHover

iHover

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


 

Caption Hover Effects

Caption Hover Effects

Caption Hover Effects

Создаёт несколько простых, но стильных эффектов при наведении для подписей изображений. Идея заключается в том, чтобы при наведении на миниатюры, получить эффектное появление заголовка, имя автора и кнопки связи. Для некоторых эффектов использованы визуальные 3D-преобразования.


 

Эффект перехода CSS3

Эффект перехода CSS3

Эффект перехода CSS3

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


 

Hover-эффекты для миниатюр на CSS3

Hover-эффекты для миниатюр

Hover-эффекты для миниатюр

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


 

Circle Hover Effects

Circle Hover Effects

Circle Hover Effects

Очередной набор правил CSS, для создания впечатляющих эффектов преобразований при наведении на абсолютно круглые миниатюры. Пакет содержит 7 видов переходов CSS3, очень подробная документация по настройке и использованию. Эффекты поддерживаются всеми современными браузерами.


 

Вращение миниатюр при наведении

Вращение миниатюр на CSS3

Вращение миниатюр на CSS3

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


 

Sexy Image Hover Effects

Sexy Image Hover Effects

Sexy Image Hover Effects

Если перевести дословно:”Сексуальный эффект при наведении на изображения”. Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.


 

5 Hover-эффектов на CSS3

5 Hover-эффектов на CSS3

5 Hover-эффектов на CSS3

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


 

Анимация подписей изображений

Анимация подписей изображений

Анимация подписей изображений

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


 

Hover-эффекты с элементами анимации

Hover-эффекты с элементами анимации

Hover-эффекты с элементами анимации

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


 

Изменение яркости картинок

Изменение яркости картинок

Изменение яркости картинок

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


 

10 Image Hover Effects

10 Image Hover Effects

10 Image Hover Effects

Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.


 Border Animation Effect

screenshot2015-04-13 18-11-24screenshot2015-04-13 18-11-24

 

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


 

Original Hover Effects With CSS3

Original Hover Effects With CSS3

Original Hover Effects With CSS3

Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.


Shape Hover Effect

Shape Hover Effect

Shape Hover Effect

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


 

Раздвижные изображения

Раздвижные изображения для появления подписи

Раздвижные изображения для появления подписи

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


 

Slick CSS3 Animated Image

Slick CSS3 Animated Image

Slick CSS3 Animated Image

С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.


 

Всплывающая подпись при наведении

Всплывающая подпись при наведении

Всплывающая подпись при наведении

Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.


 

Диагональное появление подписи

Диагональное появление подписи

Диагональное появление подписи

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


 

Анимированные заголовки миниатюр

Анимированные заголовки миниатюр

Анимированные заголовки миниатюр

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


 

Подчёркнутые или очерченные подписи к миниатюрам

Подчёркнутые или очерченные подписи к миниатюрам

Подчёркнутые или очерченные подписи к миниатюрам

Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.


 

Причудливые формы и zoom-эффект

Причудливые формы и zoom-эффект

Причудливые формы и zoom-эффект

Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.


 

Наложение иконки на изображение

Наложение иконки на изображение

Наложение иконки на изображение

Замечательные эффекты наложения иконки на миниатюры изображений в различных вариациях появления. В примере использован символ (+) очерченный кругом с помощью border-radius: в CSS, так же можно использовать шрифт-иконки, для большей информативности всплывающей панели.


 

6 Подписей к картинкам

6 Вариантов подписей к картинкам

6 Вариантов подписей к картинкам

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

Источник


Caption Hover Effects

How to create some subtle and modern caption hover effects.

CaptionHoverEffectCaptionHoverEffect

Learn how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button.

View Tutorial


Direction aware CSS3 Hover Effect with jQuery

Create a direction-aware hover effect using CSS3 and jQuery.

Hover-эффекты для изображений на чистом CSS3Hover-эффекты для изображений на чистом CSS3

Learn how to create a direction aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse.

View Tutorial


Circle Hover Effects with CSS Transitions

A tutorial about how to create different hover effects on circles with CSS transitions and 3D rotations

Hover-эффекты для изображений на чистом CSS3Hover-эффекты для изображений на чистом CSS3

In this tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites.

View Tutorial


Animated Text and Icon Menu with jQuery

Learn how to create a slick menu with a nice animation feature on hover.

Hover-эффекты для изображений на чистом CSS3Hover-эффекты для изображений на чистом CSS3

Make elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.

View Tutorial


CSS3 Hover Effects

Beautiful CSS3 Image Effects

Hover-эффекты для изображений на чистом CSS3Hover-эффекты для изображений на чистом CSS3

This tutorial will show you five examples of CSS3 hover effects using different CSS properties. Please note that the CSS3 effects will only work properly in modern browsers that support the CSS3 properties in use.

View Tutorial


Unique CSS Button Hover Effects

Some creative and modern button styles and effects for your inspiration.

CreativeButtonsCreativeButtons

This CSS button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons a bit of JavaScript to add/remove effect classes is used.

View Tutorial


Icon Hover Effects

A set of simple round icon hover effects with CSS transitions and animations for your inspiration.

Here’s a collection of simple icon hover effects. Create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements.

View Tutorial

33 CSS3 эффекта при наведении, о которых вы должны знать

Применение различных hover эффектов CSS при наведении курсора на изображение, ссылку или текст является одним из наиболее распространенных методов CSS.

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

Как следует из названия, это коллекция из 10 невероятно стильных эффектов наведения.

Исходный код

Когда вы наводите указатель мыши на различные элементы, CSS hover эффект при наведении следует за курсором и создает удивительные 3D презентации.

Исходный код

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

Исходный код

Если вы ищете круговые эффекты наведения, здесь вы найдете несколько интересных. В общей сложности доступно 12 различных CSS hover эффектов рамки.

Исходный код

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

Исходный код

А вот несколько впечатляющих эффектов наведения для кнопок. Все они прекрасно подойдут для сайтов любого типа.

Исходный код

Еще один набор из 10 hover эффектов CSS для кнопок. Большинство из них довольно впечатляющие.

Исходный код

Это коллекция, состоящая из четырех различных эффектов наведения на изображение. Вместе с эффектом отображаются его название и описание.

Исходный код

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

Исходный код

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

Исходный код

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

Исходный код

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

Исходный код

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

Исходный код

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

Исходный код

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

Исходный код

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

Исходный код

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

Исходный код

Подойдет для текста, кнопок или изображений. Постепенное воссоздание рамки — это действительно интересный эффект.

Исходный код

Вам нужен CSS hover эффект при наведении для панели поиска или иконки карты? Это именно он. Его бесшовные преобразования — сплошное удовольствие для глаз.

Исходный код

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

Исходный код

Это отличный способ предоставления дополнительной информации о товарах в интернет-магазине. При наведении курсора на изображение продукта с помощью красивого эффекта отображается информация о нем.

Исходный код

Идеальный CSS hover эффект при наведении для раздела «Связаться с нами«. Он отображает контактную информацию в раскрывающемся конверте, но только после того, как пользователь наведет курсор мыши на изображение.

Исходный код

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

Исходный код

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

Исходный код

Этот hover эффект CSS добавляет к изображению красивые стили.

Исходный код

Эффект наведения для круговых изображений. В коллекции присутствует четыре различных стиля эффектов наведения.

Исходный код

Этот CSS hover эффект при наведении воссоздает анимацию иконок Safari. Вы можете заменить значок собственным изображением или логотипом.

Исходный код

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

Исходный код

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

Исходный код

Это поистине уникальный CSS hover эффект рамки. При наведении курсора мыши он «кладет изображение на землю«.

Исходный код

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

Исходный код

Это еще один CSS hover эффект при наведении, выделяющий путь перемещения курсора мыши. При наведении указателя он добавляет затемнение на изображения. И это затемнение следует за курсором.

Исходный код

Эти красивые эффекты наведения выглядят очень интересно. Анимация и масштабируемость SVG-изображений делают их идеальными для любого типа сайтов.

Исходный код

Что вы думаете об описанных мною hover эффектах CSS? Какие из них понравились вам больше всего? Напишите об этом в комментариях.

Данная публикация представляет собой перевод статьи «30+ CSS3 Hover Effects You should be Familiar With» , подготовленной дружной командой проекта Интернет-технологии.ру

Оригинальные hover-эффекты для изображений на чистом CSS3 — ITC-LIFE

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

Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

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

Hover Effect Ideas

Очень интересный эффект при наведении на миниатюры изображений, с использованием тонких линий в конструкции и типографии. Несколько различных видов эффектов появления подписей к картинкам, мягкие и не навязчивые 3D-преобразования, и плавные переходы псевдо-элементов. Работает только в современных браузерах.


 

iHover

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


 

Caption Hover Effects

Создаёт несколько простых, но стильных эффектов при наведении для подписей изображений. Идея заключается в том, чтобы при наведении на миниатюры, получить эффектное появление заголовка, имя автора и кнопки связи. Для некоторых эффектов использованы визуальные 3D-преобразования.


 

Эффект перехода CSS3

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


 

Hover-эффекты для миниатюр на CSS3

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


 

Circle Hover Effects

Очередной набор правил CSS, для создания впечатляющих эффектов преобразований при наведении на абсолютно круглые миниатюры. Пакет содержит 7 видов переходов CSS3, очень подробная документация по настройке и использованию. Эффекты поддерживаются всеми современными браузерами.


 

Вращение миниатюр при наведении

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


 

Sexy Image Hover Effects

Если перевести дословно:»Сексуальный эффект при наведении на изображения«. Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.


 

5 Hover-эффектов на CSS3

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


 

Анимация подписей изображений

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


 

Hover-эффекты с элементами анимации

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


 

Изменение яркости картинок

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


 

10 Image Hover Effects

Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.


 

Border Animation Effect

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


 

Original Hover Effects With CSS3

Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.


Shape Hover Effect

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


 

Раздвижные изображения

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


 

Slick CSS3 Animated Image

С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.


 

Всплывающая подпись при наведении

Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.


 

Диагональное появление подписи

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


 

Анимированные заголовки миниатюр

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


 

Подчёркнутые или очерченные подписи к миниатюрам

Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.


 

Причудливые формы и zoom-эффект

Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.


 

Наложение иконки на изображение

Замечательные эффекты наложения иконки на миниатюры изображений в различных вариациях появления. В примере использован символ (+) очерченный кругом с помощью border-radius: в CSS, так же можно использовать шрифт-иконки, для большей информативности всплывающей панели.


 

Слайд-эффект для подписей изображений

Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только CSS3 и HTML5.


 

6 Подписей к картинкам

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


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

 

Оригинал статьи здесь

33 hover-эффекта на CSS3, о которых следует знать каждому


Сегодня я хочу поделиться с вами подборкой, состоящей из 33 hover-эффектов, основанных на CSS3.

Как уже понятно из заголовка, здесь вы найдете коллекцию, состоящую из 10 невероятно стильных CSS эффектов:

Этот невероятный CSS3-эффект поможет вам добиться уникального результата. При наведении курсора на элементы страницы эффект начинает следовать за указателем, создавая невероятный трехмерный эффект:

Несмотря на то, что этот эффект можно по праву считать самым распространенным, он по-прежнему способен привлекать внимание:

Если вам нужны круговые эффекты на CSS3-коде, то вы попали в нужное место! Здесь их целых 12 штук!

Еще один интересный CSS эффект при наведении курсора, который позволит создать невероятно привлекательные миниатюры или украсить любые изображения:

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

Еще один набор, состоящий из 10 различных CSS3-эффектов. Большинство из них очень впечатляющие:

Данная коллекция включает в себя четыре различных эффекта при наведении на картинку CSS. Каждый эффект раскрывает заголовок и описание:

Забавный и интересный эффект при наведении курсора на изображения. Он хорошо подойдет для раздела отзывов или списка сотрудников с их фотографиями:

Эффект, выполненный в винтажном стиле, который точно напомнит вам о прошлом!

Несмотря на название, это непросто эффект. Он показывает заголовки и слегка изменяет уровень прозрачности при наведении курсора:

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

Пока не наведете курсор на картинку, не поймете всей красоты эффекта. Бессистемные линии моментально выстраиваются в логотип, который тут же оформляется цветом:

Должен признать, что это самый интересный CSS hover эффект при наведении. Просто невероятно, как одно изображение раскрывает другое!

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

Возможно, это не самый практичный эффект, однако он точно забавный! Наведите курсор на солнцезащитные очки, и начнется магия!

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

Этот уникальный hover CSS эффект отлично подойдет для текста, кнопок или картинок:

Не знаете, как украсить иконки поиска или карты? Тогда это решение для вас! Плавные трансформации будут приятны любому глазу:

Эффект отлично подойдет для скрытия кнопок социальных сетей, которые будут отображаться лишь при наведении курсора:

Этот CSS эффект поможет привлекательным образом отобразить дополнительную информацию о товарах в интернет-магазине:

Идеальный эффект при наведении для раздела контактов. Этот анимированный конверт отображает контактную информацию на развороте. Но происходит это только после наведения курсора:

Уникальный эффект при наведении, который позволяет заменить традиционную кнопку “Вверх” на анимированную:

Здесь представлено сразу два эффекта. Кроме увеличения картинки эффект также изменяет область отображения при наведении курсора на изображение:

Этот CSS эффект для сайта был разработан под вдохновением от видео, посвященного OS X Yosemite:

Еще один круглый эффект, применимый к круговым изображениям. Здесь представлено четыре различных hover-стиля:

Этот эффект представляет собой воссоздание анимации иконки браузера Safari. Можно без труда заменить иконку собственной картинкой или логотипом:

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

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

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

Этот интересный CSS эффект при наведении позволяет изменять фон при наведении курсора на кнопку:

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

Эти красивые hover CSS эффекты устроены довольно интересно. Настоящая анимация и масштабируемые SVG-картинки позволяют использовать подобные эффекты на сайтах любого типа:

Это, пожалуй, лучшие эффекты, созданные с помощью CSS3, которые мне удалось найти. Как они вам? Какие из них вы планируете использовать в собственных проектах? Напишите об этом в комментариях.

Данная публикация представляет собой перевод статьи «30+ CSS3 Hover Effects You should be Familiar With» , подготовленной дружной командой проекта Интернет-технологии.ру

Hover эффекты для изображений. Эффекты при наведении на изображение.

Собираю подборку эффектов для изображений при наведении. Они еще называются Hover эффекты изображений. Сами коды размещены на CodePen. Там же можно посмотреть демо-примеры. Копируйте или скачивайте код эффектов, экспериментируйте и используйте в своих проектах.

Эффект увеличения картинки при наведении

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

See the Pen Hover эффект изображения при наведении by Egor (@Far-East) on CodePen.

 

Оверлей эффект с подписью при наведении на изображение

Hover эффекты для изображений

При наведении на картинку проявляется цвет и анимированная подпись, плюс ссылка. В этом примере использована сетка bootstraр, но можно брать какую угодно сетку, желательно просто в проекте использовать normalize.css. Залил на CodePen, может еще и пригодится.

See the Pen Hover эффект для изображений by Egor (@Far-East) on CodePen.

 

Красивый эффект наложения тени

При наведении на изображение плавно появляется тень с четырех сторон. даже не знаю как описать данный эффект. Хотя что его описывать, смотрите ниже. На реальных картинках этот hover эффект смотрится гораздо интереснее.

See the Pen Еще один ховер для картинок by Egor (@Far-East) on CodePen.

   

Продолжение следует… По мере возможности буду дополнять статью.

Смотрите также

Простые hover-эффекты для изображений при помощи CSS

Hover-эффекты — достаточно интересная тема для изучения.  Ведь их применение может сделать ваш сайт более динамичным и живым. Сегодня мы рассмотрим некоторые эффекты для работы с изображениями. Каждый пример  имеет HTML и CSS коды, которые вы можете увидеть в действии.

 Посмотрите на демо ниже, чтобы увидеть все hover-эффекты, которые будут рассматриваться в этом уроке.

Перед тем, как приступить к созданию отдельных примеров, требуются некоторые базовые установки. Ниже приведен CSS-код, которые мы будем использовать, чтобы реализовать все примеры.

Большинство это основные вещи: box-sizing  позволяет управлять моделями (не стесняйтесь применять более точные настройки, если вам не нравится универсальный селектор). Класс pic дает нам место, чтобы применять некоторые основные стили для каждой  фотографии.

Масштабирование и панорамирование

Первая группа эффектов включает в себя использование некоторых приемов с  hidden overflow.

 Demo

Увеличение

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

Вот HTML-код:

<div>
  <img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>

Обратите внимание, что изображение, которое было использовано в примере имеет размеры 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: all 1s ease;
          transition: all 1s ease;
}
.grow img:hover {
  width: 400px;
  height: 400px;
}

Мы вначале устанавливаем размер изображения зооpx на 300px, а затем, когда пользователь наводит на него курсор, увеличиваем к 400px. Поскольку у нас overflow — hidden, это позволит нам получить эффект масштабирования.

Сжатие

В прошлом примере, мы посмотрели, как изображение при наведении курсора мыши увеличивается. Рассмотрим обратный эффект. Этот метод в целом точно такой же, только на этот раз вы начнете с размеров в 400px и  при наведении курсора уменьшите их на 300 пикселей.

HTML

<div>
  <img src="http://lorempixel.com/400/400/nightlife/4" alt="city">
</div>

CSS

/*SHRINK*/
.shrink img {
  height: 400px;
  width: 400px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.shrink img:hover {
  width: 300px;
  height: 300px;
}

Боковое панорамирование

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

HTML

<div>
  <img src="http://lorempixel.com/600/300/sports/8" alt="kick">
</div>

Здесь мы используем изображение шириной 600px и высотой  только 300px — мы изменяем горизонтальное положение фотографии и нам не нужно применять эффекты к высоте.

CSS

/*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.

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

Чтобы передать эффект движения, будем еще раз использовать этот эффект — он также подходит для создания вертикального панорамирования.

HTML

<div>
  <img src="http://lorempixel.com/300/600/sports/5" alt="climb">
</div>

CSS

/*VERTPAN*/
.vertpan img {
  margin-top: 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;
}
.vertpan img:hover {
  margin-top: -200px;
}

Код практически такой же, как и в прошлый раз, только теперь  вместо margin-left мы используем  margin-top.

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

Следующие  эффекты  более динамичны.

Демо

Наклон

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

HTML

<div>
  <img src="http://lorempixel.com/300/300/transport/5" alt="car">
</div>

CSS

/*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 ease;
          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);
}

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

Скругление углов

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

HTML

<div>
  <img src="http://lorempixel.com/300/300/nature/5" alt="beach">
</div>

CSS

/*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, это создаст эффект, который фокусируется на определенной части изображения.

HTML

<div>
    <img src="http://lorempixel.com/300/300/sports/1" alt="cricket">
  </div>

CSS

/*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-фильтры позволяют выполнять некоторые довольно удивительные эффекты! Демо 

Размытие

 

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

HTML

<div>
  <img src="http://lorempixel.com/300/300/transport/2" alt="plane">
</div>

CSS

/*BLUR*/
.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.blur img:hover {
  -webkit-filter: blur(5px);
}

Как вы видите, мы используем  -webkit-filter , а затем устанавливаем размытие blur  5px.

B&W

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

HTML

<div>
  <img src="http://lorempixel.com/300/300/nature/2" alt="sea">
</div>

CSS

/*B&W*/
.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.bw:hover {
  -webkit-filter: grayscale(100%);
}

Здесь для grayscale было установлено значение 100%.

Яркость

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

HTML

<div>
  <img src="http://lorempixel.com/300/300/technics/2" alt="sea">
</div>

CSS

/*DARKEN*/
.brighten img {
  -webkit-filter: brightness(-65%);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.brighten img:hover {
  -webkit-filter: brightness(0%);
}

По материалам  Joshua Johnson.

Перевод — Дежурка.

Возможно, вас также заинтересуют следующие статьи:

 

CSS: зависание Selector

      

Example

Выберите и стилизуйте ссылку, когда на нее наведете курсор:

       а: зависать  {
 цвет фона: желтый;
 }   

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

Больше примеров «Попробуй сам»


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

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

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

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

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


Браузерная поддержка

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

                                
Selector                       
: hover4.07.02.03.19.6

Примечание: В IE должен быть объявлен чтобы селектор: hover работал с другими элементами, кроме element.


CSS Syntax

: hover {
css декларации;
} демонстрация

Больше примеров

Example

Выберите и стилизуйте элемент

,

и при наведении на него курсора:

       p: hover, h2: hover, a: hover {
цвет фона: желтый;
 }

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

Example

Выберите и создайте стиль для не посещенных, посещенных, парящих и активных ссылок:

       / * непосещенная ссылка * /
a: ссылка {
цвет: зеленый;
}

/ * посещенная ссылка * /
 a: посетил {
цвет: зеленый;
}

/ * наведите курсор мыши на ссылку * /
 a: hover {
цвет: красный;
}

/ * выбранная ссылка * /
 а: активный {
цвет: желтый;
}   

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

Example

Ссылки на стили с разными стилями:

       а.
50 CSS Hover EffectsCollection of hand-picked free HTML and CSS hover effect code examples: animations, transitions, etc. Update of February 2019 collection. 11 new items.
                                           

Собрание отобранных бесплатных HTML и CSS hover effect примеров кода: анимаций, переходов и т. Д.

. Обновление коллекции за февраль 2019 года. 11 новых предметов.

  1. CSS Примеры эффекта при наведении курсора
  2.     
  3. Hover Effect CSS Libraries
  1. jQuery Hover Effects
  2.     
  3. CSS Анимационные библиотеки
  4.     
  5. CSS Image Effects
Примеры кода

HTML и CSS hover effect (34 элемента).

              
Author
      
  • Паулина Гетьман
  •         
  •       
           
о коде
  

CSS-зависимый от направления эффект зависания

  

Поставляется с Sass @ mixin, чтобы вы могли быстро изменить количество столбцов и элементов. Также вы можете изменить размер окна. Он продолжает работать при изменении сетки.

  

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

  

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

  

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

              
Author
      
  • Vlad Racoare
  •         
  •       
           
о коде
  

Clip-Path Hover Animation

  

A clip-path — парящая анимация, полностью доступная с клавиатуры.

  

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

  

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

  

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

              
Author
      
  • Andy Barefoot
  •         
  •       
           
о коде
  

Продажи электронной коммерции

  

Элементы сетки электронной коммерции с эффектами наведения.

  

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

  

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

  

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

              
Author
      
  • Chris Coyier
  •         
  •       
           
о коде
  

Staggered Animations

     

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

  

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

  

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

     
О коде
  

Pure CSS Box Hover с фоновым эффектом

  

Когда вы наводите курсор на кавычки, фон изменится, на какую цитату вы наводите курсор.Лучше всего смотреть на экранах планшетов или настольных компьютеров. Полная отзывчивость все еще желательна.   

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

  

Отзывчивый: no

  

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

              
Author
      
  • Dronca Raul
  •         
  •       
          
Сделано с
    
  • HTML / CSS (SCSS) / JavaScript (Babel)
  •     
     
О коде
  

Kinetic Magnetic Dot

  

Кинетическая магнитная точка с небольшим количеством JavaScript.

  

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

  

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

  

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

              
Author
      
  • Fitri Ali
  •         
  •       
           
о коде
  

Hover Effect Like Super Team Deluxe

     

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

  

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

  

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

              
Author
      
  • Жуан Марсель
  •         
  •       
           
О коде
  

Футуристический 3D-эффект Hover

  

Используется как навигация, меню или эффект.

  

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

  

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

  

Зависимости: material-icons.css

              
Author
      
  • Tobias Glaus
  •         
  •       
           
О коде
  

Позволь мне увидеть, что ты получил!

  

Эффект наведения для поля с медиа-контентом в HTML и CSS.

  

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

  

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

  

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

     
О коде
  

Box с эффектом волшебного увеличения

  

Box с эффектом анимированного волшебного зума в чистом CSS.

  

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

  

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

  

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

     
О коде
  

Анимированная коробка с эффектами наведения мыши

  

Анимированная коробка с эффектами наведения в HTML и CSS.

  

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

  

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

  

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

              
Author
      
  • Лукаш Вернер
  •         
  •       
           
О коде
  

Box Corners Animation

  

Box углы анимации при наведении в чистом CSS.

  

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

  

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

  

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

              
Author
      
  • Дэвид Лейнингер
  •         
  •       
           
о коде
  

Hover Эффект: Pop and Background Animate

  

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

  

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

  

Отзывчивый: no

  

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

Demo image: Radial Gradient Spotlight Effect                      
Author
            
  • Джордж У.Park
  •                 
  •             
                  
Сделано с
        
  • HTML
  •             
  • CSS
  •             
  • JavaScript / Babel
  •         
         
О коде
    

Радиальный градиентный прожектор

    

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

Demo image: Icons Hovering                      
Author
            
  • Ying Ying Szeto
  •                 
  •             
                   
О коде
    

Icons Hovering

    

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

Demo image: Hover Animation                      
Author
            
  • Кэссиди Уильямс
  •                 
  •             
                   
О коде
    

Hover Анимация

    

One div анимация наведения.

Demo Image: Attract Hover EffectDemo GIF: Attract Hover Effect

Atract Hover Effect

Выберите эффект парения с помощью HTML, CSS и JavaScript.
Сделано Louis Hoebregts
July 6, 2017

Demo Image: Pure CSS Perspective Hover EffectDemo Image: Эффект наведения перспективы чистого CSS

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

Список блоков с эффектом перспективы.
Сделано Maxime Lafarie
Июль 6, 2017

Demo Image: Image Hover EffectDemo Image: Эффект наведения изображения

Эффект наведения изображения

Изображение с отражением и эффектом близости при наведении.
Сделано Tiago Alexandre Lopes
2 июня 2017 г.,

Demo Image: Stacked Cards Hover EffectsDemo Image: Эффекты наведения стопок карточек

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

Просто поиграйтесь с большим количеством CSS-переходов и эффектов наведения.
Сделано Кайлом Браммом
Мая 17, 2017

              
Author
      
  • Росский Паштет
  •         
  •       
           
О коде
  

Pure CSS Hover Blur

     

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

  

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

  

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

Demo Image: CSS 3D HoverDemo Image: CSS 3D Hover

CSS 3D Hover

Pure CSS 3D эффект парения для карточек.
Сделано Akhil Sai Ram
Декабрь 24, 2016

Demo image: Lifted Paper Strips                      
Author
            
  • Бастиан Андре
  •                 
  •             
                   
О коде
    

Лифт бумажные полоски

    

Lifted Paper Strips (эффект наведения).

Demo Image: 10 Stylish Hover Effects With LESSDemo Image: 10 стильных эффектов наведения с LESS

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

Небольшая коллекция стильных эффектов с LESS.
Made by Renan C. Araujo
Октябрь 13, 2016

Demo Image: 10 Stunning Hover Effects With SCSSDemo Image: 10 потрясающих эффектов наведения с помощью SCSS

10 потрясающих эффектов наведения с помощью SCSS

Небольшая коллекция стильных эффектов с SCSS.
Сделано Ренаном С. Araujo
13 октября 2016 г.

Demo Image: Pure CSS 3D Perspective Render With :hover AnimationДемо-изображение: 3D-перспектива Pure CSS с визуализацией : hover Анимация

3D-визуализация Pure CSS с : hover Анимация

Совет: чтобы сохранить этот трехмерный вид, вы должны знать детали, длина слова должна быть пропорциональна номеру свойства перспективы тела.
Сделано Ноэлем Дельгадо
Октябрь 30, 2014

Demo Image: CSS3 Hover EffectsDemo GIF: CSS3 Hover Effects

CSS3 Hover Effects

Вдохновленный tympanus.net, демонстрация большинства CSS3-эффектов при наведении.

Demo Image: Hover AnimationDemo GIF: анимация при наведении курсора

анимация при наведении курсора

Использует jQuery для добавления / удаления классов и запуска анимации только при выводе мыши. Библиотеки эффектов наведения

HTML и CSS (5 предметов).

Demo Image: Hover.cssDemo Image: Hover.css

Hover.css

Коллекция CSS3-эффектов при наведении курсора, применяемых к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. Д. Легко применить к вашим собственным элементам, изменить или просто использовать для вдохновения. Доступный в CSS, Sass и LESS.
Сделано Ианом Ланн

Demo Image: iHover.css Демо-изображение: iHover.css

iHover.css

iHover — это коллекция эффектов наведения, основанных на чистом CSS, вдохновленная статьей codrops, разработанной Sass.
Made by gudh

Demo Image: Image Hover EffectsDemo Image: Эффекты наведения изображения

Эффекты наведения изображения

Изображения наведения изображения, которые работают с или без Bootstrap.

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

Ваш адрес email не будет опубликован.