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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В посте собрана подборка различных эффектов и анимации 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. Простое выдвижное меню

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

Если вам понравился эффект, то вы можете просто скопировать готовый код и использовать его!

Оживите свой веб-сайт!

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

Сегодняшние примеры все реализованы и оптимизированы под новые современные браузеры, и обязательно будут в них работать (например, в Mozilla или браузерах семейства WebKit). Мы не можем заверить вас относительно работы в IE, но в самых свежих версиях эффекты точно будут работать как надо. Но не стоит забывать, что для каждого эффекта подготовлен привлекательный вариант отката на случай, если браузер всё-таки не будет поддерживать эффект.

01. Увеличение

Демо: Для просмотра

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

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

CSS-код эффекта Bump Up

Ex1 img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}

Ex1 img:hover {
margin-top: 2px;
}
02. Stack & Grow

Демо: Для просмотра

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

Для реализации здесь были использованы изображения размером 400х133 пикселей. Затем они были изменены в размере до 300х100 пикселей посредством CSS, и расширены при наведении курсора мыши. Так как в примере весь список выровнен по центру, новый размер изображений преломлял всё выравнивание. Эту проблему можно решить посредством выставления отрицательных полей в половину ширины изображений в увеличенном размере.

CSS-код для Stack & Grow

/*Example 2*/
#container {
width: 300px;
margin: 0 auto;
}

#ex2 img{
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}

#ex2 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
03. Fade Text in

Демо: Для просмотра

Здесь автор хотел создать нечто вроде события по типу javascript, когда вы наводите курсор на один пункт, а эффект отображается на другом. Здесь были взяты текст и изображение, а затем помещены в отдельный div с выравниванием по левому краю. Далее к div’у были добавлены параметры color: transparent и line-height: 0px. Это позволило разместить текст по верхнему краю div’а и вообще спрятать его.

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

CSS-код эффекта Fade Text In

#ex3 {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent;
font-size: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;

}

#ex3:hover {
line-height: 133px;
color: #575858;
}

#ex3 img{
float: left;
margin: 0 15px;
}
04. Crooked Photo

Демо: Для просмотра

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

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

Здесь вы можете применять псевдо-селекторы.

CSS-код для Crooked Photo

#ex4 {
width: 800px;
margin: 0 auto;
}

#ex4 img {
margin: 20px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#ex4 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
05. Fade In and Reflect

Демо: Для просмотра

Этот эффект немного посложнее в реализации, поэтому нам пришлось немного повозиться с ним, чтобы добиться достойного эффекта. Стандартное положение изображения – слегка прозрачное. Затем, когда вы наводите на изображение, уровень прозрачности понижается, и изображение приобретает первоначальный вид, а также появляется небольшое свечение и отражение (только для браузеров семейства WebKit).

К сожалению, отражение – это не совсем переход, поэтому оно появляется сразу, несмотря на то, что остальное содержимое появляется в замедленном темпе.

Если вы запутались в CSS-коде отражений, вы можете узнать об этом побольше в статье (David Walsh).

CSS-код эффекта Fade In and Reflect

#ex5 {
width: 700px;
margin: 0 auto;
min-height: 300px;
}

#ex5 img {
margin: 25px;
opacity: 0.8;
border: 10px solid #eee;

/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}

#ex5 img:hover {
opacity: 1;

/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
Заключение

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

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

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

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

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

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

Border Animation Effect

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

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

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

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.

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.

Circle Hover Effects with CSS Transitions

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

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.

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.

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

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

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

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