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


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

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

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

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

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

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



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


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


Оставьте комментарий

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

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

  • Виктория Карпова

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

    • Максим Зайцев От автора

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

  • Сергей Саранчин

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

    • Максим Зайцев От автора

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

  • Николай Вилков

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

    • Максим Зайцев От автора

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

      • Николай+Вилков

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

        • Максим Зайцев От автора

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

  • Владимир

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

    • Максим Зайцев От автора

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