Hover css эффекты для блока: Интересные hover эффекты: для изображений, кнопок, ссылок

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

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

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

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

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

button:hover { background: rgba(0,0,0,0); color: red; } .  my-picture:hover { opacity: 0.5; filter: alpha(opacity=50);
}

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

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

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

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

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

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

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

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

Sullivan Buttons

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

CSS Icons on Hover

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

Button Hover Effects

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

Nav Hovers

Несколько фишек, которые позволяют сделать более необычные подчеркивания ссылок на 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, есть документация.

Итого.

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

10 лучших библиотек для CSS-анимации

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

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

Список библиотек

1. Animista
2. Animate CSS
3. Vivify
4. Magic Animations CSS3
5. Cssanimation. io
6. Angrytools
7. Hover.css
8. WickedCSS
9. Three Dots
10. CSShake

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

Выбор анимации

Вы можете выбрать какой тип анимации вам нужен (например анимация появления или исчезания элемента), кроме того что вы можете выбрать определенный вид анимации (например scale-in), вы также можете выбрать еще и различные варианты для этой анимации (например scale-in-right).

Настройка

Animista также дает нам возможность настраивать и такие свойства анимации как:

• продолжительность (duration)
• задержка (delay)
• или направление анимации

И что еще лучше, вы можете выбрать объект который нужно анимировать.
Это может быть:

• простой центрированный блок
• отдельный символ
• фон
• или даже изображение

Получение CSS кода

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

Скачивание выбранной анимации

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

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

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

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

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

<div></div>

//Javascript
document.querySelector('.my-element').classList.add('animated', 'slideInLeft')

//Jquery
$(".my-element").addClass("animated slideInLeft")

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

Дополнительные возможности

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

delay

Вы можете добавить задержку для своей анимации добавив класс delay

<div><div>

speed

Также вы можете контролировать скорость анимации добавив один из перечисленных ниже классов

<div><div>

Vivify — это библиотека анимации, которую я всегда считал улучшенной версией Animate CSS. Она работает точно также, содержит такие же классы, но расширена еще несколькими. Вместо добавления класса animated, надо добавлять vivify.

<div></div>

//Javascript
document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')

//Jquery
$(".my-element").addClass("vivify slideInLeft")

Как и Animate CSS, Vivify также предоставляет классы для управления продолжительностью и задержкой анимации. Классы задержки и длительности доступны со следующим интервалом:

<div></div>

Обратите внимание, что эти значения в миллисекундах. 1000мс = 1с.

В этой библиотеке есть очень приятные и плавные анимации, особенно мне нравятся 3D анимации.
Но рассказывать мало, попробуйте сами поиграться с ними.
В этой библиотеке надо добавлять класс magictime и класс-название анимации.

<div></div>

//Javascript
document.querySelector('.my-element').classList.add('magictime', 'fadeIn')

//Jquery
$(".my-element").addClass("magictime fadeIn")

Cssanimation.io — это коллекция огромного количества различных анимаций, наверное около 200 штук и от этого просто захватывает дух.

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

Для запуска добавляем класс cssanimation и класс-название анимации своему элементу.

<div></div>

//Javascript
document.querySelector('. my-element').classList.add('cssanimation','fadeIn')

//Jquery
$(".my-element").addClass("cssanimation fadeIn")

Вы можете добавить класс infinite если хотите, чтобы анимация была зациклена.

<div></div>

Кроме того, cssanimation.io предоставляет вам возможность анимации букв. Для этого вам понадобиться подключить файл letteranimation.js, а затем добавьте le{animation_name} текстовому элементу.

<div></div>

Для того, чтобы анимировать буквы последовательно добавьте класс sequence, чтобы анимировать их случайным образом добавьте класс random.

<div></div>

Sequence

Random

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

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

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

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

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

У них есть действительно удивительные анимации. Более того, в hover.css также есть классы для анимации иконок, например, font awesome.

Использовать hover.css очень просто. Надо просто добавить нужный класс к вашему элементу. Например так:

<button>Hover me!</button>

WickedCSS — это небольшая библиотека CSS-анимации, в ней не так уж много вариантов анимаций, но те, которые у нее есть — великолепны.
Используется просто — добавляем название анимации к вашему элементу и готово.

<div></div>

//Javascript
document.querySelector('.my-element').classList.add('bounceIn')

//Jquery
$(".my-element").addClass("bounceIn")

Three Dots — это набор CSS-анимаций для прелоадера, созданных из трех точек, которые, на самом деле, являются одним элементом.

Для запуска просто создаем элемент div и добавляем название анимации

<div></div>

И в конце у нас «шейкерный коктейль».
Как следует из названия, CSShake — это библиотека CSS-анимации, которая содержит различные типы анимаций встряхивания.
Для запуска добавляем класс shake и класс-название анимации своему элементу.

<div></div>

//Javascript
document.querySelector('.my-element').classList.add('shake','shake-hard')

//Jquery
$(".my-element").addClass("shake shake-hard")

Zoom-эффект на CSS3

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

Рассмотрим как это работает.

Для начала нам понадобиться картинка для фона. Я закачал на сайт вот эту:

И задал следующие стили для блока:

.f-block {     background: url(/wp-content/uploads/2015/10/private-interior.jpg) no-repeat center center;     width: 400px;     height: 200px;     background-size: 100% 100%; }

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

Т.к. картинка — это фон контейнера, то она не выйдет за границы этого контейнера, а для манипуляций с масштабом воспользуемся атрибутом background-size.

Опишем анимацию для объекта без наведения:

.f-block {     animation-delay: .25s;     animation: anm1 0.7s ease forwards; } @keyframes anm1 {     from {         background-size: 115% 115%;     }     to {         background-size: 100% 100%;     } }

Т.е. мы задаём две точки анимации @keyframes и её скорость (700 мс).

При наведении анимация будет обратная:

.f-block:hover {     animation: anm2 0.7s ease forwards; } @keyframes anm2 {     to {         background-size: 115% 115%;     } }

Нам достаточно описать только одну точку (конечную фазу to или 100%), т.к. начальная точка уже описана.
В итоге получим вот такой контейнер (наведите на него курсор мыши):

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

Вариант с увеличением до 200%

Добавил по просьбам трудящихся (в комментариях)…

@keyframes anm1 {     from {         background-size: 200% 200%;     }     to {         background-size: 100% 100%;     } } .f-block:hover {     animation: anm2 0.7s ease forwards; } @keyframes anm2 {     to {         background-size: 200% 200%;     } }

Как удалить CSS: поведение при наведении курсора из элемента

Решения с использованием CSS¶

Чтобы удалить эффект наведения CSS для определенного элемента, вы можете установить свойство pointer-events элемента (поведение при наведении курсора, которое вы хотите для отключения) на «нет».

В приведенном ниже примере у нас есть несколько кнопок, созданных с помощью элементов

  

  
    
    <стиль>
      .отключен {
        указатель-события: нет;
        непрозрачность: 0.3;
      }
      .кнопка {
        радиус границы: 20 пикселей;
        отступ: 10 пикселей 15 пикселей;
        граница: 1px solid # 000;
        фон: # b5b3b3;
        курсор: указатель;
        дисплей: встроенный блок;
        маржа: 10 пикселей;
      }
      . button-blue: hover {
        фон: # 75a4fa;
      }
      .button-green: hover {
        фон: # 53e05a;
      }
    
  
  
    

      Наведите указатель мыши на эту синюю кнопку
    
    

    

      Наведите указатель мыши на эту зеленую кнопку
    
    

    

      Это отключенная синяя кнопка
    
    

    

      Это неактивная зеленая кнопка
    
 
  

  

  
    
    <стиль>
      . тестовое задание {
        граница: 0px;
      }
      .testhover: hover {
        граница: 1px solid # 0814bf;
      }
    
  
  
    

      Текст с отключенным эффектом наведения
    
    

      Наведите курсор на этот текст
    
  
  

  

  
    
    <стиль>
      .test: not (.nohover): hover {
        граница: 1px solid # 0814bf;
      }
    
  
  
    

      Какой-то текст
    
    

      Какой-то текст
    
    

      Текст с отключенным эффектом наведения.
  
  

  a: активный {цвет: красный; }  

  @media (hover: hover) {
    a: hover {цвет: красный; }
}  

  a: парение {цвет: красный; }

@media (hover: none) {
    а: навести {цвет: наследовать; }
}  

   Кнопка с: hover и без: active 
 Кнопка с: активна для мобильных устройств   

  .button1,
.button2 {
  отступ: 10 пикселей;
}
.button1: hover {
  фон: желтый;
  цвет: # 000;
  цвет границы: желтый;
  курсор: указатель;
}
@media (hover: hover) {
  .button2: hover {
фон: синий;
цвет: #ffffff;
цвет границы: синий;
курсор: указатель;
  }
}
@media (hover: none) {
  .button2: active {
фон: синий;
цвет: #ffffff;
цвет границы: синий;
курсор: указатель;
  }
}  

 
 
 Наведите курсор на этот текст, чтобы увидеть эффект! 
 
 

 .hover-underline-animation {
 display: inline-block; 
 позиция: относительная; 
 цвет: # 0087ca; 
} 
 .hover-underline-animation :: after {
 content: ''; 
 позиция: абсолютная; 
 ширина: 100%; 
 преобразование: scaleX (0); 
 высота: 2 пикселя; 
 низ: 0; 
 осталось: 0; 
 цвет фона: # 0087ca; 
 transform-origin: внизу справа; 
 переход: преобразование 0.Легкость 25 секунд; 
} 
 .hover-underline-animation: hover :: after {
 transform: scaleX (1); 
 transform-origin: внизу слева; 
}