Эффекты с кругами при навдении курсора мыши


Содержание

Красивые эффекты при наведений мыши CSS3 — Второй урок

Во-втором примере мы добавим специальный класс view-second. Затем переделаем немного структуру html-кода обернем описание в класс content, а блок с классом mask оставим пустым.

Перепишем стиль для маски.

Добавляем стили для события Hover

Что будет происходить?

  • При наведение на элемент будет накладываться маска
  • После наложения маски будут накладываться остальные элементы

Как изменить курсор при наведении мыши в CSS

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

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

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

Представим вам следующие методы контролирования курсора:

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

Как сделать курсор в виде руки при наведении мыши на элемент списка¶

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

  • ) и установить стиль только для него. Но если необходимо установить указатель в форме руки для всех элементов списка, просто установите стиль для элемента
  • .

    Код будет иметь следующий вид, если хотите установить курсор в виде указателя:

    Давайте рассмотрим пример вышеуказанного метода:

    Пример

    Другой пример, где меняется курсор-указатель. Здесь мы используем селектор :nth-child вместе с nth-child(odd) как cursor: progress и nth-child(even) как cursor: pointer для отдельных типов курсора на разных элементах.

    Пример

    Как изменить курсор гиперссылки при наведении мыши¶

    Известно, что курсор по умолчанию для гиперссылки устанавливается как «pointer». Если хотите изменить его, нужно указать тип курсора для элемента с помощью CSS селектора :hover.

    Чтобы изменить «pointer» в «default», вам понадобится эта часть кода:

    Смотрите следующий пример:

    Пример

    Так как ссылки имеют color: blue и text-decoration: underline по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.

    Смотрите статью Как изменить цвет ссылки с помощью CSS.

    Как установить изображение для курсора¶

    Давайте научимся, как еще можно работать с курсором! Можно также установить выбранное вами изображение как курсор на вашей веб-странице.

    После этой части кода установите свойство cursor как image:

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

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

    Пример

    Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код Base64, просто вставляя этот код в URL значение курсора. Или можно загрузить иконку на вашу веб-страницу и использовать URL для установления курсора.

    Пример

    Пример со всеми видами курсора¶

    Здесь увидите пример, который содержит все возможные виды курсора.

    Для значений «zoom-in», «zoom-out», «grab» и «grabbing» добавляется расширение -webkit- .

    Vavik 96

    Интернет дайджест для вебмастеров и фотографов

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

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

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

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

    Hover Effect Ideas

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

    iHover

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

    Caption Hover Effects

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

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

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

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

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

    Circle Hover Effects

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

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

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

    Sexy Image Hover Effects

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

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

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

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

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

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

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

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

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

    10 Image Hover Effects

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

    Border Animation Effect

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

    Original Hover Effects With CSS3

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

    Shape Hover Effect

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

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

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

    Slick CSS3 Animated Image

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Caption Hover Effects

    How to create some subtle and modern caption hover effects.

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

    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.

    Цукерберг рекомендует:  21 плагин для организации слайдшоу

    Circle Hover Effects with CSS Transitions

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

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

    Animated Text and Icon Menu with jQuery

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

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

    CSS3 Hover Effects

    Beautiful CSS3 Image Effects

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

    Unique CSS Button Hover Effects

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

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

    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.

    Тренды дизайна: инновационные эффекты при наведении курсора мышки

    Куда бы вы ни посмотрели в интернете – везде увидите потрясающий анимационный эффект. Если анимация была обязательным элементом дизайна 2020 года, то инновационные эффекты «наведения» — это будущий дизайнерский тренд-2020.

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

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

    Сегодня рассмотрим все эти варианты по отдельности.

    Движение на главной странице

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

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

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

    Эффекты кнопок

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

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

    Галереи и слайд-шоу

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

    Ключ к проектированию современной анимации можно получить прямо из руководства по Material Design:

    Движение должно быть быстрым

    Движение должно быть понятным

    Движение должно быть связным (без рывков)

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

    Навигация и меню


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

    С помощью значков-гамбургеров анимация пунктов меню может стать сильным направленным инструментом.

    Oxen Made использует анимацию наведения на главной странице двумя способами, чтобы направлять пользователей к нужным действиям. «Меню» меняет цвет при наведении, чтобы пользователи знали, что оно является кликабельным элементом. Затем полное меню перемещается в левой стороне страницы. Далее небольшая треугольная стрелка сигнализирует о том, что на прокрутке есть больше содержимого.

    Формы и поля

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

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

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

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

    Ресурсы и код для тестирования

    Готовы добавить анимированные эффекты в свой дизайн? Вот ресурсы, которые могут помочь вам приступить к работе.

    Hover.css: коллекция эффектов CSS для ссылок, кнопок, логотипов, SVG, изображений и т. д… Доступно в CSS, Sass и LESS.

    Вывод

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

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

    Популярность Эффекта Mouse Оver В Веб-Дизайне И Простота Создания В Photoshop И CSS

    Одними из самых популярных тенденций в среде веб-дизайнеров являются эффекты mouse over или эффекты при наведении указателя мышки. Как их создать с помощью Photoshop, CSS, где взять идеи и готовые кусочки программного кода.

    Успех дизайна сайта зависит от многих аспектов. Но когда речь начинает идти о пользовательском опыте, то, как правило, именно детали и вносят ощутимую разницу. Казалось бы, похожие сайты немного отличаются друг от друга и, соответственно, как результат, имеют разную популярность и конверсию. Это, если не говорить о маркетинге в целом. Каждый элемент веб-дизайна влияет на качество конечного продукта (любой сайт, который создается мастером – продукт его работы, творчества), но некоторые особенности усиливают проект гораздо больше, чем всё прочее.

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

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

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

    Font Smith

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

    Pixels by Tomer Lerner

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

    Trainrobber

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

    Команда М11, занимающаяся декорациями для различных мероприятий, кино и телевидения, создала сайт, который умудрился получить сразу несколько наград. Анимация же здесь использовалась весьма тонко. Кнопочки, иконки меняются только при наведении мышки, а переходы между экранами (страницами) смотрятся весьма живо и нераздражительно.

    The Selfie Collection

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

    Joint

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

    Принципы использования Mouse Over

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

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

    Реализация Mouse Over

    Эффект Mouse Over в веб-дизайне обычно реализуется четырьмя способами:

    • HTML (прописать изменение одной картинки на другую через свойство ссылки)
    • Смена одной картинки на другую посредством JavaScript
    • Стили CSS
    • Flash, Shockwave, Java

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

    iHover

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

    CSS3 Hover Effects

    Еще один ресурс с примерами и кодом для анимации. Сам же код CSS можно найти по ссылке «VIEW TUTORIAL», а затем просто использовать подзаголовки с названием «1 EXAMPLE», «2 EXAMPLE» и так далее.

    Animated SVG Icons

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

    3D Thumbnail Hover Effects

    Почему эффект анимации не сделать трехмерным? Вполне можно и это несложно. Примеры представлены по ссылке в заглавии, а исходных код можно увидеть по ссылке в верхнем меню «BACK TO THE CODROPS ARTICLE».

    Hover.css

    Огромное количество 2D анимационных эффектов, таких как смена фона, рамки, тени и свечения или создания выносок, загнутых уголочков и многое иное. Все свойства анимации предлагаются в одном файле hover.css, который и предлагают создатели загрузить и затем веб-дизайнеру остается только выбирать нужное и подключать к общему своему проекту. Подробнее описано в Tutorial, где и азы использования CSS тоже есть.

    Использование Photoshop

    Несмотря на то, что эффектов Mouse Overs неимоверное количество, в веб-дизайне вполне можно создать анимацию и самостоятельно силами Photoshop. И речь не идет о шкале анимации, что мы использовали, рассматривая типографику. Достаточно иметь плагины и расширения для работы с CSS и создать нужные изображения.

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

    Шаг 1

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

    Шаг 2

    Все слои разбили по группам. Затем выделяем обе кнопочки и нажимаем Изображение -> Кадрирование. Таким образом, у нас на экране остается только рабочая область без фона.

    Шаг 3

    Уже её сохраняем в формат PNG-8, в данном случае web_button2.png

    Шаг 4

    Теперь в той же папке, где сохранили изображение, создадим файл HTML web_button2.html например, в Блокноте. И пишем вот такой простенький код HTML, где указываем width и height блока, соответствующего размерам блока с кнопками, а в качестве фона используем созданный нами файл PNG.

    Цукерберг рекомендует:  Практичное меню на CSS

    Шаг 5

    Также во второй части CSS описываем действие через свойства a:hove и a:focus и снова используем изображение, но обратите внимание, уже сдвинутое по вертикали на 50px ниже. То есть при появлении курсора мышки, изображение загрузит в этот блок другой вид кнопочки, нижний.

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

    Особенностью же их использования может стать тот момент, что изображения будут сменяться не посредством использования готового файла PNG, а задания общего визуального стиля через CSS для возможности работы с любыми изображениями. Для чего и придется использовать плагин, например, тот же CSS Hat.

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

    Резюмируя

    Создаются ли веб-мастерами интернет-магазин или блог, сайт услуг или визитка для Landing Page, но эффект наведения мышки на изображение mouse hover effects всегда придает проекту утонченность, изюминку и способен заинтересовать посетителя. С каждым годом эффект становится популярнее, но использование его таит в себе множество условностей, особенностей и правил. Несмотря на доминирование плоского простого дизайна, легкая анимация будто бы немножко освежает проект, а потому пренебрегать ею не стоит, но и злоупотреблять тоже.

    Анимированные иконки, сменяющиеся картинки или появление надписей на статичных изображениях, смена цвета на кнопочках, или появление текста рядом с изображением – все это mouse over effects. Что же касается использования CSS, а не JQuery, то первый гораздо проще в обработке и он быстрее загружается. Тем более что и язык проще, удобнее разбивать на модули, имеются готовые функции и свойства, которые всего-то и необходимо прописать и описать.

    Веб-дизайн – поистине искусство создания сайтов, словно бы художник творит новое свое полотно. И неважно, какая тематика проекта – крохотная изюминка прекрасна только своим скромным наличием.

    Прыгают элементы при наведении мыши

    Комментарий модератора
    Создавайте темы с осмысленными и понятными названиями — это серьезно повышает шансы, что на ваш вопрос ответят.

    При наведении на ссылку, пункты меню немного смещаются в сторону. Как это убрать?

    19.10.2020, 12:59

    Эффект при наведении. При наведении на впереди стоящий элемент, предыдущие элементы меняли цвет border
    Необходимо реализовать это по возможности без js. Если есть какие-то варианты на css, буду рад.

    Анимация при наведении мыши
    С помощью чего можно сделать такую анимацию или может кто-то может скопировать. Анимация собственно.

    Событие при наведении мыши
    Надо чтобы стиль punct блока div выделялся другим цветом при наведении у меня не выходит. .punct.

    Курсор сбоку при наведении мыши
    Всем добрый день! Подскажите как сделать курсор сборку при наведении мыши и когда этот элемент.

    Смена изображения при наведении мыши
    Делаю сайт «Интерактивное пособие по физическому развитию тела» не вижу ошибку в коде. .

    Все эффекты css3 при наведении на картинку

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

    Объясню кратко принцип работы.

    В 1 элемент до наведения мыши ставится css код:
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;

    И какие-то данные, которые будут изменены, например:
    height: 188px;
    width: 188px;

    Далее, после наведения мыши пишем css, с новыми значениями, например:
    width: 300px;
    height: 300px;

    Вот, что можно получить в итоге:

    Согласитесь кол-во эффектов просто поражает!

    Скачать данный пример css анимации для картинок

    Также вы можете просмотреть огромный html + css3 код данного примера:

    Как изменить картинку при наведении на нее курсора или немного о hover-эффектах

    Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

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

    Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:

    Как вставлять картинки на веб-страницу вы можете узнать из статьи как вставить изображение на web-страницу.

    И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут , тогда html-код картинки будет выглядеть примерно так:

    Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity , которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X) , так как они не поддерживают свойство opacity . Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.

    Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами и html-файла нужно добавить следующий css-код:

    На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover говорит браузеру, что для всех элементов , имеющих атрибут class равный animate1 при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками < и >. Если все сделали правильно, то должно получиться примерно так:

    Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:

    img.animate1 <
    filter: alpha (Opacity=25);
    opacity: 0.25;
    >
    img.animate1:hover <
    filter: alpha (Opacity=100);
    opacity: 1;
    >

    Результат будет такой:

    Для большего эффекта можно замедлить изменения прозрачности картинки. Для этого можно воспользоваться свойством CSS transition , которое устанавливает эффект перехода между двумя состояниями элемента. Добавим для примера одну секунду замедления. Тогда наш CSS код станет таким:

    img.animate1 <
    filter: alpha (Opacity=25);
    opacity: 0.25;
    -moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */
    -webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */
    -o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */
    transition: all 1s ease-in-out; /* эффект перехода для других браузеров */
    >
    img.animate1:hover <
    filter: alpha (Opacity=100);
    opacity: 1;
    >

    С помощью свойства transform изображение можно масштабировать, вращать, сдвигать, наклонять. Попробуем увеличить картинку. Тогда css-код будет таким:

    img.animate1 <
    — moz-transition: all 1s ease;
    — webkit-transition: all 1s ease;
    — o-transition: all 1s ease;
    transition: all 1s ease;
    >
    img.animate1:hover <
    — moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */
    — webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */
    — o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */
    — ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */
    transform: scale (1.5); /* эффект трансформации для других браузеров */
    >

    И результат будет таким:

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

    img.animate1 <
    — moz-transition: all 1s ease;
    — webkit-transition: all 1s ease;
    — o-transition: all 1s ease;
    transition: all 1s ease;
    >
    img.animate1:hover <
    — moz-transform: rotate (360deg) scale (1.5);
    — webkit-transform: rotate (360deg) scale (1.5);
    — o-transform: rotate (360deg) scale (1.5);
    — ms-transform: rotate (360deg) scale (1.5);
    transform: rotate (360deg) scale (1.5);
    >

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

    Допустим у нас есть две картинки, одна черно-белая другая цветная:

    Сделаем так, чтобы при наведении курсора на черно-белое изображение отображалось цветное. Для этого исходную картинку сделаем фоном элемента div с помощью свойства background . А при наведнии на картинку курсора будем менять фоновую картинку с помощью все тех же псевдокласса hover и свойства background . Для реализации этого эффекта на html страницу добавляем элемент div с классом rotate1 :

    И добавляем следующие описания стилей:

    div.rotate1 <
    background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
    width: 480px; /* Ширина рисунка */
    height: 360px; /* Высота рисунка */
    >
    div.rotate1:hover <
    background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
    >

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

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

    В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position . Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент a> . Тогда в html-страницу вставляем такой код:

    А в css-файл такой:

    a.rotate2 <
    background: url (img/button.png); /* Путь к файлу с исходным рисунком */
    display: block; /* Ссылка как блочный элемент */
    width: 50px; /* Ширина рисунка в пикселах */
    height: 30px; /* Высота рисунка */
    >
    a.rotate2:hover <
    background-position: 0 -30px; /* Смещение фона */
    >

    И последний на сегодня способ, это когда одно изображение размещается под другим с помощью css правила position: absolute . В этом случае помещаем в контейнер div два изображения:

    И добавим css-стилей:

    .animate2 <
    position:relative;
    margin:0 auto;/* устанваливаем блок div по центру страницы*/
    width:480px; /* Ширина */
    height: 360px; /* Высота */
    >
    .animate2 img <
    position:absolute; /* абсолютное позиционирование*/
    left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
    top: 0; /* выравниваем картинки по левому верхнему углу div-а */
    >

    После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:

    Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition :

    .animate2:hover img.second, .animate2 img.second:hover <
    opacity:0;
    filter:alpha (opacity=0);
    -moz-transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
    >

    А если добавить свойство transform :

    .animate2:hover img.second, .animate2 img.second:hover <
    opacity:0;
    filter:alpha (opacity=0);
    -moz-transform:scale (0, 1);
    -webkit-transform:scale (0, 1);
    -o-transform:scale (0, 1);
    -ms-transform:scale (0, 1);
    transform:scale (0, 1); /* уменьшаем ширину картинки до 0 */
    >

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

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

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

    Установка

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

    * <
    -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 :

    Как Вы можете видеть здесь мы используем два класса pic и grow . Базовый pic который задает размер изображения и границы. Теперь давайте посмотрим, 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 ;
    >

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

    Уменьшение

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

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

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

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

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

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

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

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

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

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

    Наклон

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

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

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

    Поворот

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

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

    Фокусировка

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

    /*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), потому что другие браузеры, к сожалению их (фильтры) не поддерживают.

    Размытие

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

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

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

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

    /*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%. Процент оттенков серого можно понизить.

    Осветление

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

    /*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% от нормального состояние картинки.

    Сепия

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

    /*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% будут применены по умолчанию.

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

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

    /*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% цвета насыщенней, меньше цвета тускнеют.

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

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

    /*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 фильтр изображений — это инверсия.

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

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

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

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

    /*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 до 0.

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

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

    CSS hover эффекты — для картинок, кнопок, при наведении на ссылки, блоки и др.

    Очень часто на сайтах вы могли встречать изменение оформления ссылок или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс :hover в CSS. Сегодня рассмотрим некоторые приемы верстки позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на:

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

    Hover эффект в CSS стилях добавляется справа от элемента следующим образом:

    Чаще всего механизм применяется именно для ссылок дабы изменить их цвет или добавить/убрать подчеркивание. Однако он может быть задан и другим блокам, кнопкам, текстам или использоваться при создании горизонтального выпадающего меню.

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

    Кстати, при задании стилей ссылок также дополнительно могут использоваться селекторы :link — для не посещенных еще страниц, :visited — тех, где вы уже были + :active определяет активный сейчас адрес. Важно размещать hover эффект в CSS после :link и :visited, если они существуют.

    Перейдем от теории к практике. Ниже представлен список полезных материалов и сниппетов — переходите по ссылкам дабы просмотреть исходники.

    Hover эффекты кнопок и ссылок

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

    Простые примеры для кнопок

    В данной статье приведены 8 базовых способов как можно оригинальным образом обыграть динамические hover эффект при наведении: добавление иконки, создания прозрачного фона, 3D преобразование, наклон и т.п. Все коды достаточно простые, вот один из них:

    Необычный градиентный в кнопке

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

    Sullivan Buttons

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

    CSS Icons on Hover

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

    Button Hover Effects

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

    Несколько фишек, которые позволяют сделать более необычные подчеркивания ссылок на CSS нежели с базовым свойством text-decoration. Фон кнопки дополнительно заполняется разными визуальными эффектами.

    Info on Hover

    Функциональность всплывающих подсказок сейчас поддерживается во всех браузерах, но вы можете доработать ее под свои нужды. В текущем примере срабатывание псевдокласса происходит для тега dfn, смотрится стильно. Код достаточно компактный HTML + CSS.

    Mana Button

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

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

    15 базовых приемов

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

    Красивые hover эффекты изображений

    Подборка из 30 приятных и плавных действий при наведении на картинку. За счет простых визуальных манипуляций в виде зума, добавления линий создается хороший комплексное впечатление. Местами увеличивается заголовок и «подтягивается» краткое описание. Отличный вариант для портфолио.

    Barberpole Hover Animation

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

    CSS hover эффекты с определением направления

    Отличная подборка сниппетов и кодов по теме находится в статье с css-tricks.com. Все эти примеры объединяет тот факт, что в процессе работы определяется местоположение и направление движения курсора. Это, в свою очередь, позволяет создавать достаточно оригинальные реакции при наведении на элементы страницы:

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

    Direction Aware Hover Goodness

    Direction Aware Tiles using clip-path Pure CSS

    Остальные фишки ищите в оригинальной статье.

    Animatism

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

    Caption Hover Effects

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

    CSS Hover библиотеки

    Hover.css

    Проект под незамысловатым названием Hover.css содержит коллекцию CSS3 эффектов для ссылок, кнопок, блоков и т.п. Можете использовать готовый код и/или добавлять в него свои модификации. Здесь много интересного: 2D/3D преобразования, работа с фоном и рамками, тени, иконки. Решение доступно в CSS, LESS и Sass форматах.

    Imagehover.css

    Еще одна библиотека задающая hover эффекты картинкам — в бесплатной версии найдете 44 варианта преобразований (премиальный набор содержит их в 5 раз больше). Тут также поддерживаются LESS и SCSS, весит это дело лишь 19кб. На сайте имеется страница с демонстрацией всех работающих примеров. Предлагается много уникальных фишек, которые не встречались выше.

    iHover

    В проекте iHover более 30 разных приемов для круглых и квадратных по формату объектов. Все они достаточно оригинальные, простых «одноэлементных» действий в виде обычного зума/вылетания практически нет. Реализована задача на чистом CSS3 + HTML (плюс Scss файлы включены). Отличная совместимость с Bootstrap 3, есть документация.

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

    Если знаете еще какие-то интересные фишки и сниппеты, присылайте URL’ы на них в комментариях. И мы в будущем дополним статью.

  • Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих