Hover html css эффект при наведении. Как сделать, чтобы картинка менялась при наведении на нее курсора мыши

Если вам понравился эффект, то вы можете просто скопировать готовый код и использовать его!

Оживите свой веб-сайт!

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

Сегодняшние примеры все реализованы и оптимизированы под новые современные браузеры, и обязательно будут в них работать (например, в Mozilla или браузерах семейства WebKit). Мы не можем заверить вас относительно работы в IE, но в самых свежих версиях эффекты точно будут работать как надо. Но не стоит забывать, что для каждого эффекта подготовлен привлекательный вариант отката на случай, если браузер всё-таки не будет поддерживать эффект.

01. Увеличение

Демо: Для просмотра

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

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

CSS-код эффекта Bump Up

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;
}
02. Stack & Grow

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

Для реализации здесь были использованы изображения размером 400х133 пикселей. Затем они были изменены в размере до 300х100 пикселей посредством CSS, и расширены при наведении курсора мыши. Так как в примере весь список выровнен по центру, новый размер изображений преломлял всё выравнивание. Эту проблему можно решить посредством выставления отрицательных полей в половину ширины изображений в увеличенном размере.

CSS-код для Stack & Grow

/*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;
}
03. Fade Text in

Здесь автор хотел создать нечто вроде события по типу javascript, когда вы наводите курсор на один пункт, а эффект отображается на другом. Здесь были взяты текст и изображение, а затем помещены в отдельный div с выравниванием по левому краю. Далее к div’у были добавлены параметры color: transparent и line-height: 0px. Это позволило разместить текст по верхнему краю div’а и вообще спрятать его.

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

CSS-код эффекта Fade Text In

#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;

}

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

#ex3 img{
float: left;
margin: 0 15px;
}
04. Crooked Photo

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

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

Здесь вы можете применять псевдо-селекторы.

CSS-код для Crooked Photo

#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);
}
05. Fade In and Reflect

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

К сожалению, отражение – это не совсем переход, поэтому оно появляется сразу, несмотря на то, что остальное содержимое появляется в замедленном темпе.

Если вы запутались в CSS-коде отражений, вы можете узнать об этом побольше в статье (David Walsh).

CSS-код эффекта Fade In and Reflect

#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;

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

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

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

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

Задача

Заменить одну картинку на другую при наведении на неё курсора мыши.

Решение

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

Псевдокласс:hover

Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover , он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background . Алгоритм действий следующий.

Остаётся собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к атрибуту href тега .

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

Вот так выглядит код данного блока:

XHTML

В моем примере видим что эффект срабатывает на обычной ссылке. Вместо нее может быть контейнер

,

и прочие подходящие теги.

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

тут ссылки

. У вас это тоже может быть созданный вами контейнер, или уже готовый (например, виджет в сайдбаре).

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше - делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

Catside a:hover {background: #0078BF; color: #fff;}

Catside a:hover { background : #0078BF ; color : #fff ; }

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама "штука", позволяющая понять браузеру, что это нужно делать по наведению мышки - псевдокласс hover (о нем можно почитать

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

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

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

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

На чем основан эффект смены изображения

Суть всего эффекта, заключается в том, что два изображения помещаются в один блок ДИВ. Этому блоку присваивается класс или идентификатор и каждому изображению также присваивается свой класс. А далее используя эти классы, создаются css стили для смены одного изображение на другое, при наведении курсора мышки. И достигается это за счёт свойства прозрачности (opacity ).

Подготовка html каркаса для изображения

Итак, в том месте где вы хотите создать этот эффект вам необходимо вставить вот такой html каркас:

ссылка на первое изображение " width="100px " height="100px " alt="" class="img_top"> ссылка на второе изображение " width="100px " height="100px " alt="" class="img_bottom">

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

Создание css стилей

В качестве первого примера возьмём вот такие изображения:

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

Сначала я размещаю html каркас с указанием путей к файлам и их размеров:

Для достижения нужного эффекта в файл таблицы стилей нужно добавить вот такие стили:

/*Свойства для контейнера*/ #img_container { position:relative; height:114px; width:300px; margin:0 auto; cursor:pointer; } /*Свойства для изображения в контейнере*/ #img_container img { position:absolute; left:0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } /*100% прозрачность при наведении на изображение*/ #img_container img.img_bottom:hover { opacity:0; }

Кстати, в свойствах контейнера ширину и высоту можно выставить в процентах, но в таком варианте свойство margin:0 auto; теряет свою актуальность. В общем, в зависимости от того где будете использовать вставку изображений, применяйте и соответствующие свойства.

Если плавная смена изображений вам не нужна, уберите эти свойства, или смените интервал:

Webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;

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

А теперь посмотрите видеоурок, где я показываю как работает этот эффект и ещё одна разновидность этого эффекта. Когда изображение меняется с помощью вращения.

Вот и всё простой эффект готов, берите на вооружение и применяйте в своих проектах. Желаю удачи! И до встречи в новых статьях.

А вот обещанный в видеоуроке архив .

Подписывайтесь на новые статьи!

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

Примеры с изменением вида ссылки при наведении

Пример 1. Как изменить цвет и сделать подчеркивание при наведении

При наведении ссылка станет красной и подчеркнутой: ссылка

Пример 2. Как изменить фон ссылки при наведении

При наведении ссылка изменит фон на синий, а цвет ссылки станет белым: ссылка

Преобразуется на странице в следующее:

Пример 3. Как поменять курсор при наведении на ссылку

По умолчанию у ссылок курсор при наведении имеет значение cursor :pointer . В следующем примере мы изменим его на другой.

При наведении ссылка станет красной и подчеркнутой, а курсор станет в виде плюса: ссылка

Преобразуется на странице в следующее:

Пример 4. Сглаженное изменение стилей ссылки

С помощью свойства transition мы сгладим скорость изменения фона и цвета ссылки.

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

Преобразуется на странице в следующее:

Пример 5. Красивое подчеркивание ссылки

При наведении ссылка изменит цвет и появится необычное подчеркивание: ссылка

Преобразуется на странице в следующее.