Эффекты при наведении. 5 готовых вариантов на CSS3

эффект при наведении с помощью css3Порой возникает надобность сделать эффект при наведении курсора мыши на какой-либо элемент на вашем сайте. Сегодня я бы хотел поделиться готовыми вариантами — 5 довольно приятных на глаз эффектов. Эти эффекты позволять оживить ваш сайт, сделать его более динамичным. Самое приятное в представленных ниже эффектов — отсутствие JavaScript — мы сделаем все только с использованием CSS3. Про поддержку браузерами повторяться не хочется — Mozilla и webkit браузеры справятся отлично. А вот IE не совсем корректно будет отображать некоторые эффекты, хотя в последних версиях заметны улучшения. Итак, давайте посмотрим на 5 эффектов при наведении.


Если вам требуется помощь профессионалов в разработке, обслуживании или продвижении вашего сайта, то советую вам обратиться в компанию «Интернет системы» — разработка сайтов под ключ, поддержка сайтов, раскрутка — вот основные направления работы компании.

Подъем элемента

эффект наведения css3
Посмотреть демо

Этот вариант отлично подходит если у вас есть несколько горизонтально расположенных элементов. Когда вы проводите курсором мыши по ним вы получите эффект похожий на волну.
Есть несколько вариантов реализации данного эффекта. В нашем случае, мы изначально задали отступы для каждого изображения (margin), а при наведении просто уменьшаем этот отступ. Отступ начинается с 15px и сокращается до 2px при наведении на элемент курсора мыши, что заставляет изображение как бы «подпрыгнуть». Этот же эффект можно с легкостью применить к тексту.

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

А вот и сам код:

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

.ex1 img:hover {
    margin-top: 2px;
}

Увеличение

эффект наведения css3
Посмотреть демо

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

Чтобы добиться такого эффекта, я использовал изображения размером 400px х 133px. Далее я уменьшил эти изображения до размера 300px х 100px с помощью CSS и при наведении курсора мыши возвращал их к изначальному размеру. Изображения выровнены по центру. При увеличении, изображение выходило за пределы выравнивания и поэтому пришлось использовать отрицательное значение свойства margin, чтобы выровнять увеличенное изображение по центру.

А вот и сам код:

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

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

#ex2 img:hover {
	height: 133px;
	width: 400px;
	margin-left: -50px;
}

Появляющийся текст

эффект наведения css3
Посмотреть демо

В данном примере хотелось реализовать эффект используемый в JavaScript: при наведении курсора мыши на один объект — эффект применяется к другому объекту. Для начала я сделал блок div, в который поместил и изображение и текст и выставил свойство float в значение left. Благодаря этому изображение и текст выводятся друг за другом в линию. Далее я применил к блоку div свойства color:transparent и line-height:0px. С помощью этого текст помещается вверху блока и скрывается.

Чтобы показать текст при наведении курсора мыши на изображение, я просто меняю color и line-height.

Ниже приведу код этого эффекта:

#ex3 {
	width: 730px;
	height: 133px;
	line-height: 0px;
	color: transparent;
	font-size: 50px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	   font-weight: 300;
	text-transform: uppercase;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

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

#ex3 img{
	float: left;
	margin: 0 15px;
}

Двигающиеся картинки

эффект наведения css3
Посмотреть демо

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

В этом примере мы будем использовать несколько новых свойств CSS3 и их специфические конструкторы для разных браузеров. Мы будем использовать box-shadow, transition, transform для того чтобы добиться нужного эффекта. С помощью transform мы поворачиваем элемент, а с помощью transition делаем этот поворот мягким.

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

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

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

#ex4 img:hover {
	-webkit-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
}

Эффект свечения

эффект наведения css3
Посмотреть демо

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

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

А вот и код:

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

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

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

	/*отражение*/
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}


#ex5 img:hover {
   opacity: 1;

   /*отражение*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

   /*свечение*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

Заключение

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



Запись опубликована в рубрике CSS3 с метками , , , . Добавьте в закладки постоянную ссылку.

23 комментария: Эффекты при наведении. 5 готовых вариантов на CSS3

  1. Уведомление: progg.ru

  2. Уведомление: Эффекты при наведении. 5 готовых вариантов на CSS3 | Grabr

  3. Уведомление: Зеркалирование изображения с помощью CSS3 | RusDigi.org Блог Гилязетдинова Руслана

  4. аква-плюс говорит:

    Cделал недавно первый эфект на jQuery  http://xn—-7sbah3bj1ar0j.xn--p1ai/

     но тут гораздо проще, надо будет наверно переделать

  5. Димка говорит:

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

    а не могли бы написать пример как в самом файле оформить?

    То есть код ВАш я кидаю в стили… а в файле в котором непосредственно картинка есть, как оформить?

    • Гилязетдинов Руслан говорит:

      а вы на демо странице любым инспектором кода посмотрите — там все предельно просто)

      • Димка говорит:

        блин действительно)) спасибо

        • Гилязетдинов Руслан говорит:

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

      • Димка говорит:

        все просто, действительно. а зачем столько картинок? Оно же одинаково все ))

        • Гилязетдинов Руслан говорит:

          чтобы общий вид был хоть какой-то и чем-то напоминал галерею)

  6. Phil74 говорит:

    а какой файл вставлять код?

    • Гилязетдинов Руслан говорит:

      стили CSS в файл style.css или подобный в зависимости от вашей темы, HTML разметку в то место где вы хотите вывести картинки. HTML разметку можно посмотреть на демо страницах через редактор кода.

  7. OneLove говорит:

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

    • Гилязетдинов Руслан говорит:

      если вам нужен круг, то попробуйте поиграться с border-radius и сделать окружность из границ. эффект свечения применим, в данном примере, только к объектам с границей (border)

      • OneLove говорит:

        Спасибо! Вообще у меня картинка png нестандартной формы. Сделал еще одну картинку-рамку (подсветку) и наложил ее под первую с эффектом opticaly. По умолчанию 0, при наведении 1. Получилось что надо. Еще раз спасибо за статью, очень помогла и еще поможет. 🙂

  8. Dimaguru13 говорит:

    Как сделать эффект подъема элемента, толкьо чтобы элемент не поднимался, а двигался справа на лево?

  9. Dimaguru13 говорит:

    чето плавность transition не работает(

  10. LonerD говорит:

    Эффект увеличения на IE совершенно не работает.
    А вот для Оперы не помешало бы исправить, потому как работает, но криво и через раз.

  11. Вика говорит:

    Не ругайтесь если что))) Мне очень понравился вариант 4 и я бы очень хотела бы попробовать применить его у себя на сайте, только вот я ничего не поняла — куда что вставлять и где указать путь к картинке. Заранее спасибо

  12. novamebel76 говорит:

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

  13. Мина говорит:

    Эффекты, конечно, красивейшие, и работают. Проблема в том, что применяются ко всем картинкам на сайте. Посоветуете что-то?

  14. Дядюшка Бо говорит:

    Не один пример не работает

  15. andrgame.net говорит:

    Всплывающие подписи появляются при наведении курсора на круг. 7 различных стилевых оформлений. Некорректно работает в IE.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *