Порой возникает надобность сделать эффект при наведении курсора мыши на какой-либо элемент на вашем сайте. Сегодня я бы хотел поделиться готовыми вариантами — 5 довольно приятных на глаз эффектов. Эти эффекты позволять оживить ваш сайт, сделать его более динамичным. Самое приятное в представленных ниже эффектов — отсутствие JavaScript — мы сделаем все только с использованием CSS3. Про поддержку браузерами повторяться не хочется — Mozilla и webkit браузеры справятся отлично. А вот IE не совсем корректно будет отображать некоторые эффекты, хотя в последних версиях заметны улучшения. Итак, давайте посмотрим на 5 эффектов при наведении.
[adsense]
Если вам требуется помощь профессионалов в разработке, обслуживании или продвижении вашего сайта, то советую вам обратиться в компанию «Интернет системы» — разработка сайтов под ключ, поддержка сайтов, раскрутка — вот основные направления работы компании.
Подъем элемента
Этот вариант отлично подходит если у вас есть несколько горизонтально расположенных элементов. Когда вы проводите курсором мыши по ним вы получите эффект похожий на волну.
Есть несколько вариантов реализации данного эффекта. В нашем случае, мы изначально задали отступы для каждого изображения (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;
}
Увеличение
Этот эффект довольно интересен: при вертикальной прокрутке каждое изображение, при наведении на него курсора мыши, сначала увеличивается и выдвигается на передний план, а потом возвращается в начальное состояние.
Чтобы добиться такого эффекта, я использовал изображения размером 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;
}
Появляющийся текст
В данном примере хотелось реализовать эффект используемый в 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 и их специфические конструкторы для разных браузеров. Мы будем использовать 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);
}
Эффект свечения
В этом эффекте мы используем изображения, у которых изначально занижен показатель прозрачности (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. Не забудьте поэкспериментировать с этими эффектами, комбинируйте их, добавляйте что-то свое. Если у вас есть чем поделиться, вы создавали подобные эффекты — поделитесь информацией в комментариях.
Cделал недавно первый эфект на jQuery http://xn—-7sbah3bj1ar0j.xn--p1ai/
но тут гораздо проще, надо будет наверно переделать
спасибо, второй раз попадаю на вас с поисковика, подписываюсь, отличная информация.
а не могли бы написать пример как в самом файле оформить?
То есть код ВАш я кидаю в стили… а в файле в котором непосредственно картинка есть, как оформить?
а вы на демо странице любым инспектором кода посмотрите — там все предельно просто)
блин действительно)) спасибо
ну демо для того и делал, чтобы поковырять можно было) пожалуйста)
все просто, действительно. а зачем столько картинок? Оно же одинаково все ))
чтобы общий вид был хоть какой-то и чем-то напоминал галерею)
а какой файл вставлять код?
стили CSS в файл style.css или подобный в зависимости от вашей темы, HTML разметку в то место где вы хотите вывести картинки. HTML разметку можно посмотреть на демо страницах через редактор кода.
А как приметить эффект свечения для не квадратных объектов? А-то так только рамка изображения подсвечивается. Спасибо за крутой блог.
если вам нужен круг, то попробуйте поиграться с border-radius и сделать окружность из границ. эффект свечения применим, в данном примере, только к объектам с границей (border)
Спасибо! Вообще у меня картинка png нестандартной формы. Сделал еще одну картинку-рамку (подсветку) и наложил ее под первую с эффектом opticaly. По умолчанию 0, при наведении 1. Получилось что надо. Еще раз спасибо за статью, очень помогла и еще поможет. 🙂
Как сделать эффект подъема элемента, толкьо чтобы элемент не поднимался, а двигался справа на лево?
чето плавность transition не работает(
Эффект увеличения на IE совершенно не работает.
А вот для Оперы не помешало бы исправить, потому как работает, но криво и через раз.
Не ругайтесь если что))) Мне очень понравился вариант 4 и я бы очень хотела бы попробовать применить его у себя на сайте, только вот я ничего не поняла — куда что вставлять и где указать путь к картинке. Заранее спасибо
Двигающиеся картинки у меня не работают в IE в чем может быть проблема.
Эффекты, конечно, красивейшие, и работают. Проблема в том, что применяются ко всем картинкам на сайте. Посоветуете что-то?
Не один пример не работает
Всплывающие подписи появляются при наведении курсора на круг. 7 различных стилевых оформлений. Некорректно работает в IE.