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

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

Вариантов создать подобный эффект достаточно много. Сложность эффекта будет отличаться лишь в конструкциях 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 стилей

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

Пример кнопки 1
Пример кнопки 1
Пример кнопки 2
Пример кнопки 2

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

Сначала я размещаю 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 каркас указанный ранее.

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

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

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

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

Понравилась статья? Поделиться с друзьями:
Комментарии: 12
  1. Виктория Карпова

    Привет,Максим. Классный эффект. Особенно пример с мишкой и вращающимся элементом мне понравился. Потренируюсь по твоему уроку. Спасибо тебе за интересный и понятный урок!

    1. Максим Зайцев (автор)

      Вика, привет. Эффект простой, но при подборе хороших изображений, смотрится очень достойно. Думаю, многим пригодится. ;-)

  2. Сергей Саранчин

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

    1. Максим Зайцев (автор)

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

  3. Николай Вилков

    Максим, привет!
    Зачем столько кнопок «поделиться» ? Реально половино пустышки ведь…

    1. Максим Зайцев (автор)

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

      1. Николай+Вилков

        Мне просто интересен процент нажатий на иные кнопки, кроме 6-7 самых известных для Рунета. Думаю это будет 1-3 % максимум, скорей даже единичные случаи. Если эффективно, тогда понятно, но бросается в глаза такое количество, словно у вебмастера — новичка,мне так показалось))

        1. Максим Зайцев (автор)

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

  4. Владимир

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

    1. Максим Зайцев (автор)

      Здравствуйте, Владимир. Спасибо за комментарий. Я рад, что у вас всё получилось и вы нашли применение этому эффекту. Удачи вам! И заходите в гости ;-)

  5. Сергей

    А как проделать такое же, но чтобы отображалось на моб. устройствах? Пробую такое проделать на своем сайте mrcatlant .com Через комп все работает, но через мобилу просто показывает 2 картинки подряд: цветная и под ней черно-белая.

    1. Максим Зайцев (автор)

      Здравствуйте, Сергей. К сожалению на мобильных устройствах другой принцип взаимодействия с контентом, этот способ там не пройдёт.

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