Добавим немного SASS/CSS, чтобы расположить все ссылки по углам карточки. Можно сделать больше ссылок, но для простоты возьмем четыре. Для ускорения процесса будем использовать Haml.

Эффект hover

a { &:hover, &:focus { ~ .card { // CSS код } } }

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

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

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

Для параллакса такого вида самым важным свойством будет не transform, а transform-origin, наложенное на карточку. Оно должно меняться для всех зон обнаружения и присваиваться к противоположному углу от текущей зоны обнаружения.

Например, если мы заходим в зону обнаружения №1 (верх лево), transform-origin должно быть bottom right, т.е. противоположный угол. Суть такая – затронутый угол должен двигаться от нас, а остальные углы к нам.

Последние штрихи

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

// стили рамки.card { position: relative; .border { transform-origin: center center; position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border: 2px solid white; } } // параллакс эффект.container { a { &:hover, &:focus { ~ .card { .border { transform: translateZ(24px); } } } // толкаем рамку назад по клику &:active { ~ .card { .border { transform: none; } } } } }

Осталось (1) добавить transition к карточке, чтобы сгладить переход по углам, и (2) удалить стили ссылок, чтобы они были не видны. Я люблю ставить opacity в 0 во избежание казусов. Чтобы избежать перекрытия из-за поворотов карточки, я также двигаю ссылку, на которую наведен курсор, вперед.

Результат

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

Эффект hover на примере куба

Введение

Adult Swim Singles 2016 – еще один сайт с впечатляющим эффектом наведения с учетом направления курсора. По клику на иконку календаря в левом верхнем углу открывается 3D календарь, где каждый день представлен в виде куба, который поворачивается в зависимости от направления курсора. Замечательная идея!

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

Основа

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

Для создания треугольных ссылок можно использовать Clippy . Для совместимости с Firefox вам также нужен SVG clip-path. Ссылки должны иметь положительное значение translateZ (быть выдвинутыми на передний план), иначе они спрячутся за кубом.

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

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

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

Эффект hover

Далее необходимо добавить поворот по наведению курсора. Эффект можно стилизовать как угодно, но самый реалистичный метод, который я нашел, привязан к мыши. Если мышь заходит на куб слева, куб должен повернуться слева направо. Все повороты должны быть 180deg/0.5turn или отрицательные эквиваленты. Также добавим transition, чтобы куб вращался правильно.

Полировка

Нужно отполировать две вещи:

Нижний треугольник переворачивает задний текст вверх ногами.

Hover слишком чувствительный: переход между треугольниками вызывает лишние повороты.

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

Чувствительность hover эффектов пофиксить было сложнее. Решение заключается в том, чтобы текущая ссылка занимала все пространство трех других ссылок (полная ширина/высота, удаляем clip-path, двигаем вперед), но тогда пропадает интересный угловой эффект (когда быстро проводишь мышью по кривой над кубом). В конце концов, я решил проблему – я поставил задержку на transition так, чтобы фикс не срабатывал, если курсор на кубе не задержался более секунды. Задержка не убирает все проблемы, но смягчает большую часть.

Результат

Заключение

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

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

Border Animation Effect

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

1. 10 Stylish Hover Effects

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

Исходный код

2. Direction-aware Hover Effect

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

Исходный код

3. Wacom Hover Effect

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

Исходный код

4. CSS3 Hover Effects

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

Исходный код

5. Hover Animation from UNIQLO

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

Исходный код

6. Button Hover Effects

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

Исходный код

7. 10 Stunning Hover Effects

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

Исходный код

8. CSS3 Hover Effects 2

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

Исходный код

9. Bounce on Hover

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

Исходный код

10. 8-bit Hovers

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

Исходный код

11. Simple Title Hover Effect

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

Исходный код

12. Flip Down Effect

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

Исходный код

13. Curiosity Award

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

Исходный код

14. Image Hover Effect

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

Исходный код

15. Hover Animation

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

Исходный код

16. Hover Me Brother

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

Исходный код

17. Nautilus SCSS HAML Hover Effects

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

Исходный код

18. SVG Border Hover Effect 1

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

Исходный код

19. Hover Search Map Icon

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

Исходный код

20. Social Icon Pane

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

Исходный код

21. Product Item Additions Info

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

Исходный код

22. Animated Envelope

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

Исходный код

23. Back to Top

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

Исходный код

24. Fancy Hover

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

Исходный код

25. Reminders Icon Hover Effect

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

Исходный код

26. Circle Image Hover

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

Исходный код

27. Safari Icon Hover Effect

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