Смена изображения при наведении курсора мышки

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

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

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

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

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

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

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

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

<div id="img_container">
<img src="ссылка на первое изображение" width="100px" height="100px" alt="" class="img_top">
<img src="ссылка на второе изображение" width="100px" height="100px" alt="" class="img_bottom"></div>

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

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

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

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

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

<div id="img_container">
<img src="/button2.png" width="300px" height="114px" alt="" class="img_top">
<img src="/button1.jpg" width="300px" height="114px" alt="" class="img_bottom">
</div>

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

/*Свойства для контейнера*/
#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 каркас указанный ранее.

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

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

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

С уважением, Максим Зайцев.