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

Разное 
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

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

Как Вы можете видеть здесь мы используем два класса 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

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

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

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

Изображение имеет размер 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

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

Изображение имеет размер 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

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

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

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

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

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

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

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

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

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

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

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

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

<div>
  <img src=»http://lorempixel.com/output/people-q-c-300-300-4.jpg» alt=»people»>
</div>

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

<div>
  <img src=»http://lorempixel.com/output/animals-q-c-300-300-9.jpg» alt=»dog»>
</div>

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

<div>
  <img src=»http://lorempixel.com/output/transport-q-c-300-300-9.jpg» alt=»train»>
</div>

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

<div>
   <img src=»http://lorempixel.com/output/technics-q-c-300-300-1.jpg» alt=»dog»>
</div>

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

<div>
  <img src=»http://lorempixel.com/output/sports-q-c-300-300-6.jpg» alt=»soccer»>
</div>

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.

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

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

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

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

Бесплатная подборка из 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-эффект

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

 

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

Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только 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 IdeasHover Effect Ideas

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

 

iHover

iHoveriHover

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

 

Caption Hover Effects

Caption Hover EffectsCaption Hover Effects

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

 

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

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

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

 

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

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

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

 

Circle Hover Effects

Circle Hover EffectsCircle Hover Effects

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

 

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

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

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

 

Sexy Image Hover Effects

Sexy Image Hover EffectsSexy Image Hover Effects

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

10 Image Hover Effects

10 Image Hover Effects10 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 CSS3Original Hover Effects With CSS3

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

Shape Hover Effect

Shape Hover EffectShape Hover Effect

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

 

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

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

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

 

Slick CSS3 Animated Image

Slick CSS3 Animated ImageSlick 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

Простые 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.
Перевод — Дежурка.
Возможно, вас также заинтересуют следующие статьи:
 
Оригинальные 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 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» , подготовленной дружной командой проекта Интернет-технологии.ру
 10 CSS-библиотек для улучшения эффекта наведения изображения
 Позволяя пользователям  легко и четко знать, какая часть веб-страницы кликабельна  является важной частью дизайна UX. Старый, но золотой способ сделать это — изменить цвет текста и подчеркнуть его. В настоящее время, с помощью CSS, существует гораздо больше способов доставки эффектов наведения, особенно на изображения.
 Разработчики могут теперь  добавлять эффекты перехода или анимацию, когда запускается событие наведения мыши . Мы наблюдаем за направленными слайдами, масштабированием на разных скоростях, замираниями и затуханиями, эффектами шарниров, раскрытием прожекторов, колебаниями, отскоками и т.д.
 В этом сборнике  более 250 эффектов наведения , чтобы вдохновить вас. Вы также можете забрать код у источника.
  Подробнее:  Как использовать переходы и анимацию CSS3 для выделения изменений в пользовательском интерфейсе
 Эффектов наведения изображения  (16 эффектов)  
 На этой странице вы найдете замечательную коллекцию из 16 эффектов наведения изображения с подписями. Захватите код HTML и CSS для каждого эффекта, наведя курсор мыши на изображения, затем нажмите  Показать код .
  
 Анимированная анимация при наведении изображения  (4 эффекта)  
 Вот 4 классных анимации титров, которые запускаются, когда вы наводите курсор на изображение. Эффекты построены с чистыми переходами CSS3 и преобразованием, без JavaScript, для повышения совместимости в браузере.
  
 iHover  (35 эффектов)  
 iHover — это коллекция эффектов наведения, созданных на основе CSS3. Есть 20 эффектов наведения круга и 15 эффектов наведения квадрата. Чтобы использовать эффекты, вам нужно написать некоторую разметку HTML и включить файлы CSS.
  
 Image Hover  (44 эффекта)  
 Эта библиотека содержит 44 эффекта, созданных с использованием чистого CSS. Некоторые эффекты включают в себя затухание, толчки, скольжения, шарниры, раскрытие, увеличение, размывание, сальто, сгибы и ставни в нескольких направлениях. Существует расширенная версия 216 эффектов, которые можно купить за 14 евро.
  
 Идеи эффекта наведения  (30 эффектов)  
 Эта демонстрация при наведении изображения, созданная компанией Codrop, вдохновляет вас на плавные переходы между изображениями и их надписями.Всего 30 эффектов на два набора с учебными пособиями и исходным кодом.
  
 Наведите курсор мыши на  (108 эффектов)  
 Hover CSS позволяет добавлять эффекты наведения к любому элементу, например кнопке, ссылке или изображению. Эффекты включают 2D-переходы, фоновые переходы, границы, переходы Shadow и Glow и многое другое. Библиотека доступна в CSS, Sass и LESS.
  
 Аниматизм  (100+ эффектов)  
 Существует более 100 анимаций при наведении изображения на кнопки, наложения, детали, подписи, изображения и кнопки социальных сетей.Все эффекты работают на CSS3.
 Эффект наведения надписи  (7 эффектов)  
 В этой коллекции 7 различных эффектов. Все переходы выглядят действительно красиво и плавно. Перейдите в раздел учебника, чтобы узнать, как применять эти эффекты в вашем проекте.
  
 CSS-эффекты при наведении изображения  (15 эффектов)  
 Коллекция простых эффектов при наведении, таких как масштабирование, слайд, поворот, серая шкала, размытие, непрозрачность и другие основные эффекты. Вы можете использовать эти эффекты, добавив класс CSS перед тегом  figure .
 Эффект парения с учетом направления движения 
 Это очень крутой эффект парения, который обнаружит ваше последнее движение мыши. Подписи к изображениям будут открываться с одного из четырех направлений в зависимости от вашей последней позиции курсора.
 Анимация при наведении курсора 
 Вот анимация при наведении границы, вдохновленная UNIQLO. После всплывающего события граница изображения станет анимированной.
 плиток с анимированным наведением 
 Один для дизайна плитки, в этом есть медленный зум, слайды, всплывающие окна, затемненное наложение среди других.
 SVG clip-Path Hover Effect 
 Превосходный эффект наведения рентгеновского прожектора на изображение с помощью SVG  clip-path  и CSS-переходов. Прекрасно работает на Chrome, Opera и Safari.
  Подробнее:  30+ классных демоверсий CSS3 анимации, которые вы должны увидеть
 ,
 50 CSS Hover Effects 
 Collection of hand-picked free HTML and CSS hover effect code examples: animations, transitions, etc. Update of February 2019 collection. 11 new items.
  
 Коллекция отобранных бесплатных  HTML и CSS эффектов наведения  примеров кода:  анимаций, переходов и т. Д. . Обновление коллекции за февраль 2019 года. 11 новых предметов.
  1.  CSS Hover Effect Примеры
  2.  библиотек CSS с эффектом наведения мыши
  1.  jQuery Hover Effects
  2.  CSS анимационных библиотек
  3.  CSS Image Effects
 HTML и  CSS эффект парения  примеров кода (34 элемента).
 Автор 
  •  Полина Гетьман
  •  
 О коде 
 Эффект парения, ориентированный только на CSS 
 Поставляется с Sass  @mixin , чтобы вы могли быстро изменить количество столбцов и элементов. Также вы можете изменить размер окна. Он продолжает работать, когда меняется сетка.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 Автор 
  •  Влад Ракоаре
  •  
 О коде 
 Clip-Path Hover Анимация 
 Анимация при наведении курсора  , полностью доступная с клавиатуры.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Отзывчивый: нет
 Зависимости: font-awesome.css
 Автор 
  •  Джесси Куш
  •  
 О коде 
 Fun с: зависать 
 Просто поиграйте с некоторыми интересными вещами, которые вы можете сделать с помощью CSS : наведите курсор на  при стилизации точно таких же элементов HTML (и их родных элементов).
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 О коде 
 Плитка наведите мульти-кнопку 
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 О коде 
 Соединения CSS Hover FX 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 О коде 
 CSS Hover FX 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 Автор 
  •  Мелисса Эм
  •  
 О коде 
 Гладкий И Острый 
 Эффект преобразования парящих краев в чистом CSS.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 Автор 
  •  Энди Босиком
  •  
 О коде 
 Тесселяции электронной коммерции 
 Тесселяции Элементы электронной коммерции с эффектами наведения.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 Автор 
  •  Крис Койер
  •  
 О коде 
 Пошаговая анимация 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 О коде 
 Pure CSS Box Наведите курсор с фоновым эффектом 
 Когда вы наводите курсор на кавычки, фон изменится, на какую цитату вы наводите курсор.Лучше всего смотреть на экранах планшетов или настольных компьютеров. Полная отзывчивость все еще желательна.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: нет
 Зависимости: —
 Автор 
  •  Дронка Рауль
  •  
 Сделано с 
  •  HTML / CSS (SCSS) / JavaScript (Babel)
 О коде 
 Кинетическая Магнитная Точка 
 Кинетическая магнитная точка с небольшим количеством JavaScript.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: нет
 Зависимости: —
 О коде 
 Эффект наведения для ящиков 
 Эффект наведения для блоков в HTML и CSS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: font-awesome.css
 Автор 
  •  Брэдли Будах
  •  
 О коде 
 Circle Hover Effect 
 Чистый CSS эффект наведения круга.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: нет
 Зависимости: —
 Автор 
  •  ВикторКоролюк
  •  
 О коде 
 Эффект наведения круговой пульсации на кнопку 
 Наведите курсор на каждую из кнопок, чтобы увидеть эффект в действии.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 Автор 
  •  Сиддхарт Хубли
  •  
 О коде 
 Наведите курсор для информации о продукте 
 Используемые CSS-свойства:  фильтр: drop-shadow () ,  clip-path: polygon () , CSS Grid.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 Автор 
  •  Фитри Али
  •  
 О коде 
 Hover Effect Like Super Team Deluxe 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 Автор 
  •  Жуан Марсель
  •  
 О коде 
 Эффект футуристического 3D-наведения 
 Используется как навигация, меню или эффект.Он использует CSS , преобразование  и перспективу для создания уникального гололиноподобного анимационного эффекта. Может использоваться для многих других случаев, у вас, вероятно, будут свои собственные идеи. Это экспериментальная идея, вы можете захотеть конкретизировать ее для использования в производстве.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: нет
 Зависимости: —
 О коде 
 Раскройте содержимое карты на Hover 
 Чистый эффект наведения карты в HTML и CSS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: material-icons.css
 Автор 
  •  Тобиас Глаус
  •  
 О коде 
 Позволь мне увидеть, что у тебя есть! 
 Эффект при наведении курсора на медиа-контент в HTML и CSS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 О коде 
 Коробка с магическим эффектом увеличения 
 Коробка с анимированным магическим эффектом увеличения в чистом CSS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 О коде 
 Анимированная Коробка с Эффектами Наведения 
 Анимированная коробка с эффектами наведения в HTML и CSS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 Автор 
  •  Лукаш Вернер
  •  
 О коде 
 Box Corners Animation 
 Box анимации углов при наведении в чистом CSS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 Автор 
  •  Дэвид Лейнингер
  •  
 О коде 
 Эффект при наведении курсора: Pop and Background Animate 
 Эффект наведения на продукт. Изображение всплывает вверх и вниз, а затем фон выдвигается и анимируется.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: нет
 Зависимости: —
 Demo image: Radial Gradient Spotlight Effect
 Автор 
  •  Джордж У. Парк
  •  
 Сделано с 
  •  HTML
  •  CSS
  •  JavaScript / Babel
 О коде 
 Радиальный эффект градиентного прожектора 
 Это перо показывает, как можно использовать радиальные градиенты CSS для создания фокусируемого эффекта прожектора.
 Demo image: Icons Hovering
 Автор 
  •  Ин Ин Сзето
  •  
 О коде 
 Иконки Парящие 
 Симпатичные эффекты при наведении на иконки.
 О коде 
 Glitch Effect на Hover 
 Узнайте, как создать эффект сбоя с помощью CSS  clip-path  без JS.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 Demo image: Responsive 16/9 Thumbnail & Shine Hover Effect
 Автор 
  •  Квентин Верон
  •  
 Сделано с 
  •  HTML / Pug
  •  CSS / SCSS
  •  JavaScript
 О коде 
 Responsive 16/9 Thumbnail & Shine Hover Effect 
 Эта миниатюра поддерживает соотношение сторон 16/9 при любом размере.При запуске видео присутствует эффект наведения блеска и небольшая анимация. Эффект блеска с использованием переменных CSS, вдохновленных Раулем Дронкой.
 Demo image: Hover Animation
 Автор 
  •  Кэссиди Уильямс
  •  
 О коде 
 Анимация при наведении курсора 
 Один  Div  анимации парения.
 Demo Image: Attract Hover Effect Демо-версия GIF: эффект Htract Hover
 Attract Hover Effect 
 Привлекайте эффект парения с помощью HTML, CSS и JavaScript. 
 Made by Луис Хебрегтс 
 6 июля 2017 г.
 Demo Image: Pure CSS Perspective Hover Effect Демо-изображение: Чистый CSS-эффект перспективы при наведении
 Чистый CSS Перспективный эффект при наведении курсора 
 Список блоков с эффектом перспективы. 
 Сделано Maxime Lafarie 
 6 июля 2017 г.
 Demo Image: Image Hover Effect Демо-изображение: Эффект наведения изображения
 Эффект наведения изображения 
 Изображение с эффектом отражения и близости при наведении.
 Сделано Tiago Alexandre Lopes 
 2 июня 2017 г.
 Demo Image: Stacked Cards Hover Effects Демонстрационное изображение: эффекты наложения карточек
 Эффекты наложения карточек с накоплением 
 Просто поиграйте с CSS-переходами и эффектами наведения. 
 Made by Kyle Brumm 
 17 мая 2017 г.
 Автор 
  •  Русс Паштет
  •  
 О коде 
 Чистый CSS Hover Blur 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Отзывчивый: да
 Зависимости: —
 Demo Image: CSS 3D Hover Демо-изображение: CSS 3D Hover
 CSS 3D Hover 
 Чистый CSS 3D эффект парения для карт.
 Сделано Akhil Sai Ram 
 24 декабря 2016 г.
 Demo image: Lifted Paper Strips
 Автор 
  •  Бастиан Андре
  •  
 О коде 
 Поднятые бумажные полоски 
 Поднятые бумажные полоски (эффект наведения).
 Demo Image: 10 Stylish Hover Effects With LESS Демо-изображение: 10 стильных эффектов при наведении курсора с LESS
 10 стильных эффектов наведения с LESS 
 Небольшая коллекция стильных эффектов с LESS.
 Made by Renan C. Araujo 
 13 октября 2016 г.
 Demo Image: 10 Stunning Hover Effects With SCSS Демонстрационное изображение: 10 потрясающих эффектов наведения при помощи SCSS
 10 потрясающих эффектов наведения при помощи SCSS 
 Небольшая коллекция стильных эффектов с помощью SCSS. 
 Made by Renan C. Araujo 
 13 октября 2016 г.
 Demo Image: Pure CSS 3D Perspective Render With :hover Animation Демонстрационное изображение: 3D-рендеринг Pure CSS 3D с анимацией : hover 
 Pure CSS 3D-рендеринг с : парить  Анимация 
 Совет
: чтобы сохранить этот трехмерный вид, вы должны знать детали, длина слова должна быть пропорциональна номеру свойства перспективы тела.Если длина этого слова увеличивается, вы также должны увеличить перспективу 🙂 
 Автор: Рафаэль Гонсалес 
 16 сентября 2016 г.
 Demo image: CSS Only Fade Siblings On Hover
 О коде 
 CSS Only Fade Siblings On Hover 
 Исчезните все братья и сестры, когда элемент наведен, используя только CSS.
 Demo image: Hover Effect For Discover A Project Link
 Автор 
  •  Джереми Булай
  •  
 О коде 
 Эффект при наведении курсора Откройте для себя проект Link 
 Эффект наведения, например, для обнаружения имени проекта в портфеле.
 Demo Image: Hover Squares Демо-изображение: Hover Squares
 Квадраты Ховер 
 HTML и CSS парящие квадраты. 
 Сделано Рудольфом ван дер Веном 
 8 декабря 2015 г.
 Demo image: Hover Effect
 Автор 
  •  Никола Пресс
  •  
 О коде 
 Эффект Ховера 
 Эффект анимации при наведении.
 Demo Image: Direction-Aware 3D Hover Effect Демо GIF: 3D-эффект наведения, ориентированный на направление
 3D-эффект наведения, ориентированный на направление 
 CSS & биты JS. 
 Made by Noel Delgado 
 30 октября 2014 г.
 Demo Image: CSS3 Hover Effects Демо GIF: CSS3 эффекты при наведении
 CSS3 Hover Effects 
 Вдохновлен tympanus.net, витриной большинства CSS3-эффектов при наведении. 
 Сделано honglio 
 21 ноября 2013 г.
 Demo Image: Hover Animation Демо GIF: анимация при наведении курсора
 Анимация при наведении курсора 
 Использует jQuery для добавления / удаления классов и запуска анимации только при наведении мыши.
 Сделано Мэттом Болдтом 
 8 июля 2013 г.
 HTML и  CSS библиотеки эффектов наведения  (5 предметов).
 Demo Image: Hover.css Демо-изображение: Hover.css
 Hover.css 
 Коллекция CSS3-эффектов при наведении, применяемых к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. Д. Легко применить к вашим собственным элементам, изменить или просто использовать для вдохновения. Доступно в CSS, Sass и LESS. 
 Сделано Яном Ланном
 Demo Image: iHover.css Демо-изображение: iHover.CSS
 iHover.css 
 iHover — это коллекция эффектов наведения, основанная на чистом CSS, вдохновленная статьей codrops, разработанной Sass. 
 Сделано Гудх
 Demo Image: Image Hover Effects Демо-изображение: Эффекты наведения изображения
 Image Hover Effects 
 Эффекты наведения изображения, которые работают с Bootstrap или без него. 
 Сделано Майклом
 Demo Image: Mocassin.css Демо-изображение: Mocassin.css
 Mocassin.css 
 Mocassin.css — это адаптивная коллекция эффектов наведения для подписей, созданная на основе Sass.Каждая подпись соответствует размеру изображения. 
 Сделано в Eliezer Pujols
 Demo Image: HoverEffects.css Демо-изображение: HoverEffects.css
 HoverEffects.css 
 Несколько эффектов наведения для навигации (CSS3). 
 Сделано Кевином Яннисом
 ,
 W3.CSS Effects 
 W3.CSS Классы эффектов 
 W3.CSS предоставляет следующие классы эффектов:
.
 класс определяет
 w3-непрозрачность Добавляет непрозрачность / прозрачность к элементу (непрозрачность: 0,6)
 w3-opacity-min Добавляет непрозрачность / прозрачность к элементу (непрозрачность: 0,75)
 w3-opacity-max Добавляет непрозрачность / прозрачность к элементу (непрозрачность: 0.25)
 W3-оттенки серого Добавляет эффект оттенков серого к элементу (оттенки серого: 75%)
 w3-оттенки серого min Добавляет эффект оттенков серого к элементу (оттенки серого: 50%)
 w3-оттенки серого макс Добавляет эффект оттенков серого к элементу (оттенки серого: 100%)
 w3-сепия Добавляет эффект сепии к элементу (сепия: 75%)
 w3-sepia-min Добавляет эффект сепии к элементу (сепия: 50%).
 w3-sepia-max Добавляет эффект сепии к элементу (сепия: 100%).
 w3-hover-opacity Добавляет прозрачность элементу при наведении (непрозрачность: 0.6)
 w3-зависания-оттенки серого Добавляет эффект оттенков серого к элементу при наведении (оттенки серого: 100%)
 w3-hover-sepia Добавляет эффект сепии к элементу при наведении курсора
 Непрозрачность 
 Классы  w3-opacity  добавляют элементу прозрачность:
 Пример 
  
  
 
 Попробуй сам »
 Оттенки серого 
 Классы  w3-grayscale  добавляют эффект оттенков серого к элементу:
 Пример 
  
  
 
 Попробуй сам »
  Примечание:  Классы w3-grayscale не поддерживаются в IE 11
и более ранние версии.
 Sepia 
 Классы  w3-sepia  добавляют эффект сепии к элементу:
 Пример 
  
  
 
 Попробуй сам »
  Примечание:  Классы w3-sepia не поддерживаются в IE 11 и
более ранние версии.
 Hover Effects 
 Вы также можете добавить специальные эффекты при наведении курсора мыши.
 Пример 
  
  
 
 Попробуй сам »
 Hover Непрозрачность Цвет 
 Вы также можете комбинировать любые  классы w3-hover-color  с  w3-hover-opacity , чтобы создать немного «более светлый» цвет фона при наведении:
 w3-hover-red с w3-hover-opacity
 Пример 
 
 w3-hover-red с w3-hover-opacity  
 
 Попробуй сам » 
 ,
 CSS непрозрачность изображения / прозрачность 
 Свойство  opacity  определяет непрозрачность / прозрачность элемента.
 Прозрачное изображение 
 Свойство  с непрозрачностью  может принимать значение от 0,0 до 1,0. Чем ниже значение, тем прозрачнее:
 непрозрачность 0,2
 непрозрачность 0,5
 непрозрачность 1 
 (по умолчанию)
 Прозрачный эффект при наведении курсора 
 Свойство  с непрозрачностью  часто используется вместе с : hover  селектор для изменения прозрачности при наведении курсора мыши:
 Пример объяснения 
 Первый блок CSS похож на код в примере 1.Кроме того, мы добавили, что должно происходить, когда пользователь наводит курсор на одно из изображений. В этом случае мы хотим, чтобы изображение НЕ было прозрачным, когда пользователь наводит на него курсор. CSS для этого -  непрозрачность: 1; 
 Когда указатель мыши отойдет от изображения, изображение снова станет прозрачным.
 Пример обратного эффекта парения:
 Прозрачная коробка 
 При использовании свойства  opacity  для добавления прозрачности на фон элемента, всех его дочерних элементов
наследовать ту же прозрачность.Это может затруднить чтение текста внутри полностью прозрачного элемента:
 Прозрачность с использованием RGBA 
 Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте  значения цвета RGBA .
В следующем примере задается прозрачность для цвета фона, а не текста:
 Вы узнали из нашей главы о цветах CSS, что вы можете использовать RGB в качестве значения цвета. В дополнение к RGB,
Вы можете использовать значение цвета RGB с альфа-каналом (RGBA), которое определяет непрозрачность для цвета.
 Значение цвета RGBA указывается с помощью: rgba (красный, зеленый, синий,  альфа, ).  альфа  параметр представляет собой число от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный).
  Совет:  Подробнее о цветах RGBA вы узнаете в нашей главе «Цвета CSS».
 Пример 
 div {
 background: rgba (76, 175, 80, 0.3) / * Зеленый фон с 30%
непрозрачность * / 
}
 Попробуй сам "
 Текст в прозрачной коробке 
 Это некоторый текст, который помещается в прозрачную коробку.
 Пример 
 
 
 
 div.background {
 фон: повтор URL (klematis.jpg); 
 рамка: 2px сплошной черный; 
 }
 div.transbox {
 поле: 30px; 
 цвет фона: #ffffff; 
 граница: 1px сплошной черный; 
 непрозрачность: 0,6; 
 }
 div.transbox p {
 маржа: 5%; 
 вес шрифта: полужирный; 
 цвет: # 000000; 
 } 
  
  
 
 
 Это некоторый текст, который помещается в прозрачную рамку. 
  
 
  
 
 Попробуй сам "
 Пример объяснения 
 Сначала мы создаем элемент
 (class = "background") с фоновым изображением и рамкой.
 Затем мы создаем еще один
 (class = "transbox") внутри первого
.
 имеет цвет фона и границу -
Div прозрачен.
 Внутри прозрачный
, мы добавляем текст внутри элемента
.
 Проверь себя упражнениями! 
 
 ,
No related posts.
 
     Автор записи 
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *