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

Содержание

Бесплатная подборка из 40 эффектов CSS / Блог компании ua-hosting.company / Хабр

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

1. Часы CSS3 с jQuery

Эти часы созданы с использованием одного из основных инструментов CSS3 – rotate и с подключением библиотеки JQuery.

2. Аналоговые часы CSS

Более классические, аналоговые часы. Они созданы с помощью webkit transition и свойства transform CSS. А вот для того, чтобы время соответствовало текущему, понадобиться JavaScript.

3. Вращающийся 3D-куб

Вращение и перемещение по сторонам куба будет производиться стандартными клавишами «вверх», «вниз», «влево» и «вправо». Сама 3D-фигура построена с использованием webkit-perspective, -webkit-transform и -webkit-transition.

4. Несколько выдвигающихся 3D-кубов

Здесь представлено уже несколько 3D-кубов, использующих CSS3 и непосредственно свойства transform и transition. Наведение курсора на куб заставляет его отъехать в сторону, открывая текст, который находиться на другой стороне фигуры.

5. Accordion меню

Эффект «меню-гармошки» на чистом CSS, где клик по каждой из строк открывает дополнительное окно в теле самого списка. Собственная анимация в браузерах на базе WebKit.

6. Параллакс-скроллинг на CSS

Это анимированный автоматический параллакс-скроллинг с использованием CSS переходов на основе WebKit. При наведении на текстовое окно, звезды на фоне начинают плавно двигаться в сторону. Создается эффект полета.

7. Матрица

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

8. Динамичные Палароиды

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

9. Масштабирование изображений

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

10. Эффекты JavaScript на CSS3

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

11. Виртуальные пластинки DJ Hero

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

12. Скользящий винил

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

13. Эффекты при наведении на картинку

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

14. Вращающийся треугольник

При нажатии на треугольник, он начинает вращаться.

15. Космос

Целое космическое пространство, умещенное в CSS. Выступает примером наложения вращающихся слоев (более заметно при уменьшении масштаба изображения в браузере).

16. «Менины» в 3D

Интересный эффект CSS, с помощью которого известная картина Диего Веласкеса «Менины» начинает казаться трехмерной.

17. CSS для Mac OS Х

В нижней части экрана представлен набор основных иконок Mac OS Х, которые при наведении увеличиваются. Эффект придает динамики сайту.

18. Drop-In Modals

CSS3 эффекты и свойств Drop-In Modals помогут в создании быстрого, анимированного и простого изменения модальных окон.

19. Анимирование объектов

Трансформация изменяет внешний вид элемента в браузере. Показано на примере ракеты, которая «летит» из одного конца экрана в другой. Могут использоваться инструменты перемещения, вращения и т.д.

20. Цветные часы

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

21. Гелерея Lightbox на jQuery и CSS3

Это замечательная галерея, которая позволяет сортировать и раскладывать изображения в выборочном порядке. Для интерактивности галерея использует JQuery, JQuery UI и JQuery плагин FancyBox. Lightbox поддерживает название и описание картинок, группирует их и автоматически выстраивает слайды в ряд.

22. «Эластичные» превью

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

23. Динамичные карточки

Этот пример представляет собой динамический набор карточек с использованием функций HTML и CSS3.

24. Выдвижное JQuery меню

Выдвижное меню из примера создано комбинацией CSS3 и JQuery. При наведении на картинку появляется всплывающее окно с текстом.

25. Табы CSS

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

26. Fisheye меню

На примере продемонстрировано, как с помощью анимации CSS и SVG создать Fisheye меню. В качестве дополнительного бонуса используется демо-SVG в тэге IMG.

27. Выпадающее меню

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

28. Титры из «Звездных войн»

Знаменитые титры из «Звездных войн». Для их запуска будет достаточно HTML и CSS.

29. Еще эффекты Fisheye на CSS

Опять таки, увеличивающиеся при наведении значки.

30. Анимация по типу «кадр за кадром»

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

31. Имперский шагоход AT-AT

И снова «Звездные войны» — этот движущийся шагоход AT-AT сделан с помощью CSS3.

32. Еще одна «гармошка» CSS

При клике на строку, таблица раскладывается.

33. Простое выдвижное меню

При наведении секции меняют цвет и выдвигаются.

34. Магические анимационные эффекты в CSS

Показательная подборка разнообразных формаций эффектов. Достаточно кликнуть по клавишам «magic», «swap» и т.д. для демонстрации эффекта.

35. Меню из закладок

36. Прогресс бар

Анимационный прогресс бар на CSS.

37. Салют CSS

В примере показано, как создать салют из кругов на JQuery и CSS.

38. Включатель/выключатель

На примере показано, каким образом можно создать анимированную кнопку on/off с помощью CSS.

39. Цветная загрузка

Пример оригинальной разноцветной анимации загрузки на CSS.

40. Выпадающее меню
Еще один вариант простого и симпатичного выпадающего меню на CSS.

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-эффект

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

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

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

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

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

Источник

Caption Hover Effects

How to create some subtle and modern caption hover effects.

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.

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

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.

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

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.

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

15 эффектов для изображений (используем только CSS3) | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! В этой статье подготовлены 15 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код. Чтобы увидеть их в действии посетите демонстрационную страницу.

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

Установка

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: #333;
}

.pic {
border: 10px solid #fff;
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;

-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}

border-box означает, что высота и ширина блоков с изображениями будут включать в себя значения полей и границ, а класс pic является общим для всех изображений. Ограничивает высоту, ширину, задает границу и тень. И что самое важное содержимое (т.е. изображения) этого блочного элемента, будет отображаться только внутри, за пределы не выйдет свойство overflow : hidden.

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

Наша первая группа эффектов включает в себя использование нескольких трюков с масштабированием и перемещением изображения.

Увеличение

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

1
2
3

Как Вы можете видеть здесь мы используем два класса pic и grow. Базовый pic который задает размер изображения и границы. Теперь давайте посмотрим, CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

Само по себе изображение 400х400px, но мы его подгоняем под размеры блока 300x300px и указываем transition свойство, означающее что другие свойства будут изменяться плавно в течении одной секунды, подробно про transition. Так как нам необходимо увеличение изображение то при наведении оно возвращается к исходным размерам.

Уменьшение

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

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

Горизонтальное смещение

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

1
2
3

Изображение имеет размер 600х300px.

1
2
3
4
5
6
7
8
9
10
11
12
13

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

Все с помощью того же свойства transition мы плавно меняем, но уже свойство margin. При наведении смещаем картинку влево на 200px.

Вертикальное смещение

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

1
2
3

Изображение имеет размер 300х600px.

1
2
3
4
5
6
7
8
9
10
11
12
13

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

Теперь смещаем вверх на 200px.

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

Повышаем сложность создаваемых эффектов. Начнем с простого наклона, а дальше больше. Использоваться будет свойство transform — еще эффект с помощью transform.

Наклон

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

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

Поворот

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

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/*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%, в результате чего получается круг.

Фокусировка

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

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12
13

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

При наведении курсора, увеличиваем толщину границы с 10 до 70px, и как в предыдущем примере border-radius в 50%.

Фильтры изображений

На последок рассмотрим применение фильтров изображений. В отличие от приведенных выше примеров, каждый из которых используется несколько префиксов, чтобы обеспечить максимальную совместимость браузера, в филтрах использовать будем префикс-WebKit (для браузеров Chrome и Safari), потому что другие браузеры, к сожалению их (фильтры) не поддерживают.

Размытие

Первый эффект, который мы рассмотрим это размытие. Здесь с кодом все еще проще, одна строка.

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12

/*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, с размытием 5px.

Черно-белое изображение

С помощью этого фильтра, добьемся эффекта черно-белого изображения.

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12
13

/*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%);
filter: grayscale(100%);
}

Здесь я установил оттенки серого (grayscale) со значением 100%. Процент оттенков серого можно понизить.

Осветление

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

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12
13

/*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(145%);
}

Изначально яркость делаем 65%, а при наведении устанавливаем значение 145% т.е. ярче на 45% от нормального состояние картинки.

Сепия

Еще один ретро эффект) перевод цветного изображения в тональность сепия.

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12

/*SEPIA*/
.sepia 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;
}

.sepia img:hover {
-webkit-filter: sepia(100%);
}

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

Контрастность

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

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12

/*CONTRAST*/
.contrast 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;
}

.contrast img:hover {
-webkit-filter: contrast(185%);
}

Существует небольшая разница в использовании этого фильтра. Обычным значение контрастности является 100%. Больше 100% цвета насыщенней, меньше цвета тускнеют.

Оттенок изображения

Данный фильтр изменяет цвета картинки в зависимости от заданного угла.

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12

/*HUE_ROTATE*/
.hue-rotate 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;
}

.hue-rotate img:hover {
-webkit-filter: hue-rotate(65deg);
}

Значение оттенка изображения задается в градусах от 0-360, где 0 это нормальное значение.

Инверсия

Еще один Webkit фильтр изображений — это инверсия.

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12

/*INVERT*/
.invert 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;
}

.invert img:hover {
-webkit-filter: invert(100%);
}

Данный фильтр инвертирует цвета. Значение задается в % от 0-100.

Также мы можем объединить фильтры в одном правиле. Получается более комплексный эффект для изображения. Например сделать картинку черно-белой и добавить контрастности:

1
2
3

img {
-webkit-filter: grayscale(100%) contrast(150%);
}

Прозрачность

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

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12

/*OPACITY*/
.opacity 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;
}

.opacity img:hover {
-webkit-filter: opacity(25%);
}

Значение прозрачности в фильтре задается опять таки процентами, где 100% это не прозрачно, а 0% полностью прозрачно. Особенность использования прозрачности заключается в том, что его можно использовать как обычное свойство CSS, а не только как фильтр. Соответственно и работает такой эффект во всех браузерах, даже в IE9+.

1
2
3

img {
opacity: 0.5;
}

При таком варианте использование значение берется из интервала от 1 до 0.

Просмотр демо страницы и скачивание исходников не доступно

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии, спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Потрясающие эффекты CSS3 при наведении

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
 
.ch-thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
 
    -webkit-transform-origin: 95% 40%;
    -moz-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    transform-origin: 95% 40%;
 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
 
.ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: rgb(14,14,14);
    background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
 
.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(../images/noise.png);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
 
.ch-item:hover .ch-thumb {
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
    -webkit-transform: rotate(-110deg);
    -moz-transform: rotate(-110deg);
    -o-transform: rotate(-110deg);
    -ms-transform: rotate(-110deg);
    transform: rotate(-110deg);
}

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

Hover Effect Ideas

iHover

Caption Hover Effects

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

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

Circle Hover Effects

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

Sexy Image Hover Effects

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

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

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

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

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

10 Image Hover Effects

Border Animation Effect

Original Hover Effects With CSS3

Shape Hover Effect

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

Slick CSS3 Animated Image

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

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

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

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

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

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

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

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

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

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

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

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

CSS эффекты при наведении на картинку

Вы здесь: Главная — CSS — CSS3 — CSS эффекты при наведении на картинку

CSS библиотека imagehover – это коллекция различных CSS эффектов при наведении на картинку (hover effects), которые можно применять как к одиночным картинкам, так и к галереям.

Ссылка на сайт: http://imagehover.io/

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

Демонстрация примера

Что находится внутри CSS файла библиотеки? В бесплатной версии вы найдете 44 эффекта, каждый эффект имеет свой класс, в котором прописаны соответствующие свойства и их значения. В платной версии находятся стили 216 эффектов, но вам с головой хватит и 44 эффекта.

4 шага для запуска hover эффекта:

1) Скачать и подключить библиотеку

Скачайте архив и вытащите оттуда всего один CSS файл imagehover.min (сжатая версия) и подключите к вашему проекту.


<head>

  <link rel="stylesheet" href="css/imagehover.min.css">

</head>

2) Выберите эффект

На главной странице imagehover.io, выберите нужный эффект и запомните название его класса, например мне понравился класс imghvr-slide-up.

3) Создайте галерею на HTML

Создадим ряд row с тремя колонками column, в каждую из которых поместим превью картинку, текст-описание и ссылку. Вставьте название класса imghvr-slide-up в тег figure. Замените цвет подложки у тега figcaption, на более гармонирующий с дизайном сайта, по умолчанию фон под текстом – синий. У тега a, вместо решетки поставьте URL.


<div>

  <div>

    <figure>

    <img src="cat.jpg" alt="cat">

    <figcaption>

      <h3>Наведение на картинку</h3>

      <p>imghvr-slide-up</p>

    </figcaption>

    <a href="#"></a>

    </figure>

  </div>

  <div>

    <figure>

    <img src="dog.jpg" alt="dog">

    <figcaption>

      <h3> Наведение на картинку</h3>

      <p>imghvr-slide-up</p>

    </figcaption>

    <a href="#"></a>

    </figure>

  </div>

  <div>

    <figure>

    <img src="zebra.jpg" alt="zebra">

    <figcaption>

      <h3> Наведение на картинку</h3>

      <p>imghvr-slide-up</p>

    </figcaption>

    <a href="#"></a>

    </figure>

  </div>

</div>

4) CSS стили

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

 
<head>

// подключить ниже файла imagehover.min.css

<link rel="stylesheet" href="css/style.css">

</head>

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


.row {

    display: flex;

    margin: 20px;

}

Поделим ряд на три одинаковых по ширине колонки и поставим по центру, контент (картинки) внутри блоков.


.column {

    flex: 33.33%;

    padding: 5px;

    text-align: center;

}

При изменении ширины экрана, картинки будут масштабироваться, не ломая созданную структуру.


img {

    width: 100%;

    border: 1px solid #ddd; /* серая рамка */

}

Ошибка в документации

Обратите внимание, что на сайте библиотеки в документации раздела Background Color, есть ошибка. Правильно будет поменять цвет фона с дефолтного на ваш, добавив строчку кода к тегу figcaption, вместо figure.


style="background-color: #код_вашего_цвета;

Если вы все ещё размышляете о создании портфолио с вашими работами по веб-разработке, обратите внимание на видео-курс «О создании лендинга под ключ».

Создано 05.04.2019 10:39:42
Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Креативный эффект при наведении на картинку CSS3

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

Автор использует плагин Anime.js, а также свой небольшой скрипт и возможности CSS3 – ~~preserve-3d~~ и ~~transform-origin~~. Практических применений можно найти множество. Например: у Вас имеется страница с готовым фотоальбомов. Вы используете одну картинку в качестве превью и набрасываете ей один из эффектов, приведенных на демо страницу. В результате, у пользователя создается ощущение множественного выбора, который он и получает, кликнув на картинку.

Код для использования на личных проектов рекомендуется взять из исходных файлов (ссылка «Скачать» выше). Каждый отдельный блок с графиков оборачивается в следующую конструкцию:

<div> <a href=»#»> <div> <div></div> <div></div> <div></div> <div></div> <div> <img src=»img/1.png» alt=»Image»/> </div> </div> <div> <h4>anaerobic</h4> <div> <span>Period</span> <span>Subjects</span> <span>Result</span> </div> <div> <span>2045</span> <span>133456</span> <span>Positive</span> </div> </div> </a> <a href=»#»><!— … —></a> <a href=»#»><!— … —></a> </div><!— /grid —>

<div>

<div>

<div>

</div>

<div>

<h4>anaerobic</h4>

<div>

<span>Period</span>

<span>Subjects</span>

<span>Result</span>

</div>

<div>

<span>Positive</span>

</div>

</a>

</div><!— /grid —>

где, ~~grid grid—effect-vega~~ – это общая обертка анимированных блоков, а класс ~~grid__item grid__item—c1~~ задает вариант анимации при наведении. Также не забудьте подключить ~~.js~~ и ~~.css~~ файлы.

Hover Effects — легко создать любой эффект наведения — Плагин для WordPress

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

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

Основные характеристики

39 эффектов наведения
Удобство использования
Используйте в меню
Использовать для любого элемента

2D переходы

Рост
Усадочная
Импульс
Pulse Grow
Импульсная термоусадочная
Нажать
Поп
Отскок в
Bounce Out
Повернуть
Увеличить Повернуть
Поплавок
Мойка
Боб
Повесить
перекос
Наклон вперед
Наклон назад
Горизонтальное колебание
Колебание вертикальное
Колебание вниз вправо
Колебание вверх вправо
Wobble Top
Колебание дна
Наклон качания
Базз
Buzz Out
Нападающий
Назад

Переходы тени и свечения

Тень
Grow Shadow
Плавающая тень
Свечение
Shadow Radial
Box Shadow Outset
Вставка Box Shadow

Речевые пузыри

Пузырьковый верх
Пузырь правый
Пузырьковое дно
Пузырь слева
Пузырьковая верхняя часть
Пузырьковый поплавок справа
Дно пузырькового поплавка
Пузырьковый поплавок слева

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

Поддержка

Ищите ответы и задавайте вопросы в центре поддержки

Вариант установки 1. Найдите и установите этот плагин в подключаемых модулях -> Добавьте новый раздел в ваш wp-admin
Вариант установки 2: Загрузите zip-файл, затем загрузите плагин через wp-admin в Plugins -> Add new section.Или распаковать архив и загрузить папку в каталог плагинов / wp-content / plugins / через ftp
Нажмите Активируйте , если вы установили плагин через панель управления, или нажмите Активировать в списке Плагины

Как использовать плагин Hover Link?

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

Как добавить эффекты в меню?

Перейти на страницу Hover Effects
Выберите эффект и скопируйте класс (начинаются с «hvr-«)
Перейдите в «Внешний вид» -> «Меню», выберите пункт меню, к которому вы хотите добавить эффект, и добавьте класс эффекта в «Классы CSS (необязательно)».
Сохранить меню

Почему я не вижу возможности добавить классы?

В разделе «Внешний вид» -> «Меню» нажмите «Параметры экрана» (в правом верхнем углу экрана) и убедитесь, что установлен флажок «Классы CSS».Если нет — проверьте!

«Hover Effects — легко создать любой эффект зависания» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

2,1

Добавлено: функция копирования класса

2,0

Изменено: Административный стиль
Исправлено: мелкие ошибки

1,0

Ultimate Hover Effects — Плагин для WordPress

Ознакомьтесь с нашими последними темами WordPress — 100% бесплатно

Ultimate hover effects — это простые современные, но стильные эффекты наведения для wordpress. Более 85 привлекательных графических эффектов с переходом CSS3 для вашего веб-сайта и неограниченными возможностями настройки с расширенной типографикой.

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

Live Demo | Получить версию Pro

Видеоурок:

Возможности

85+ премиальных эффектов наведения.
Каждый элемент для каждого эффекта в строке
Выбрать столбец элемента для отображения в строке
Пользовательская ширина изображения.
Пользовательская высота изображения.
Пользовательский заказ элементов при наведении курсора.
При необходимости удалите пробелы в изображениях.
100% мобильный отклик.
Полный шорткод с питанием.
Удивительный генератор шорткодов при обновлении поста
Поддерживается шорткод в виджете
700+ шрифтов Google для заголовка и описания с параметром.
Пользовательский размер шрифта для заголовка и описания.
Пользовательский стиль шрифта для заголовка и описания
Неограниченный цвет шрифта для заголовка и описания.
Внешняя ссылка для каждого элемента при наведении курсора.
Открыть ссылку в новой вкладке.
Пользовательский CSS для каждого стиля.
Последняя версия WordPress.
24/7 Поддержка.

Устанавливает этот плагин как обычный плагин для wordpress.

После установки этот плагин активирует пользовательский пост под названием Hover Effects в меню панели инструментов wp.Щелкните Добавить новый >> Добавить новый элемент при наведении курсора >> Установить изображения и другую информацию из настроек >> Щелкните еще раз Добавить новый элемент при наведении курсора, чтобы добавить дополнительные элементы…
После добавления элементов нажмите кнопку «Опубликовать» в правом меню WP, чтобы опубликовать сообщение, после чего вы увидите его шорткод. Просто скопируйте оттуда шорткод, и вы готовы использовать этот шорткод в своем сообщении, на странице и в виджете.

Перейти на страницу> Добавить новый. В редакторе просто вставьте шорткод.

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

Я купил версию Pro на их веб-сайте, но так и не получил ссылку для загрузки. Я отправил полученное письмо службы поддержки, они сказали, что мне нужно получить еще одно письмо со ссылкой. Так и не получил, но они точно убежали с моими 11 долларами. Я писал им по электронной почте три раза, но они так и не ответили после первого. Мне пришлось изо всех сил и подать жалобу в PayPal, чтобы попытаться вернуть свои деньги.Так что теперь мне нужно подождать и посмотреть, нужно ли мне нагнетать ситуацию или нет. ВСЕ, ЧТО Я ХОЧУ, ЭТО ПРО ВЕРСИЯ ДЛЯ ИСПОЛЬЗОВАНИЯ НА МОЕМ ВЕБ-САЙТЕ! ПОЖАЛУЙСТА, ДАЙТЕ МНЕ ТО, ЧТО Я КУПИЛ!

Плагин

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

Вы можете купить это, но тогда вы сами по себе. Я купил профессиональную версию, и они упоминают на своем сайте поддержку 24/7.Какая ловушка! Но тогда у меня есть небольшие проблемы, которые нужно реализовать. Пытался и ждал месяцами, все способы обратиться к разработчику за помощью, ответа нет. Также плагин не обновляется, и я не нашел возможности загрузить обновленную версию. Тем не менее, это хороший полезный плагин, и с поддержкой он стоит 4-5 звезд. Если повезет, плагин работает как есть. Если нет …

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

Посмотреть 21 отзыв

«Ultimate Hover Effects» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

2.9.0

Совместимость с последней версией WordPress 5.5

2,8,9

2,8,8

Совместимость с последней версией WordPress 5.4

2.8.7 2,8,6

2,8,5

Совместимость с последней версией WordPress 5.3

2.8.4

2.8.3

2.8.2

2.8.1

2.8.0 2,7,9

2,7,8

2,7,7

Исправлена проблема с откликом на мобильном телефоне

2.7.6 2,7,5

2.7.4

2.7.3

Протестировано с помощью wordpress 5.2

2.7.2

2.7.1

2.7.0 2,6,9

2,6,8

Новая настройка анимации наведения

2.6,7

2,6,6

2,6,5

Добавлены новые опции для большей гибкости

2.6.4

2.6.3

2.6.2

2.6.1

2.6.0

2.5.9 2,5,8

2.5.7

2.5.6 2,5,5

2.5.4

2.5.3

2.5.2

2.5.1

2.5.0 2,4,9

2,4,8

2,4,7

2,4,6

2.4,5

2.0.0

Разное

Как часто можно делать клизму грудничку: рекомендации педиатров

Разное

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Разное

Как успокоить плачущего ребенка: 10 эффективных способов

Разное

Что нужно новорожденному на первое время: полный список необходимых вещей

Разное

Пеленки для новорожденных: виды, размеры и способы использования

Разное