Loading





Форекс с Альпари

eTXT




Анкетка


Плавная смена картинок при наведении курсора мыши

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Здравствуйте, друзья, начинающие web-мастера! Этот простой урок я подготовил для Вас. При наведении курсора мыши на изображение происходит плавная его замена на другое. При уводе курсора с картинки, снова показывается исходное изображение. Посмотрите демо-пример, может быть такой вариант Вам понравится и Вы без проблем примените его на своем сайте.

Девушка Девушка

Для успешной реализации эффекта на странице сайта необходимо выполнить несколько простых шагов:

1. Подберите картинки, сделайте одинаковые размеры и загрузите на сервер сайта в папку с изображениями, например, img.

2. Этот код без изменений нужно вставить в раздел head вашего сайта, где прописываются стили, или же добавить в общий файл стилей сайта:


.image.first,.image.second 
{
border: 2px solid transparent;
margin: 0;
padding: 0;
}

.image.first 
{
opacity: 1px;
display: block;
position: absolute;
z-index: 100;
transition-duration: 0.96s;
-webkit-transition-duration: 0.96s;
-moz-transition-duration: 0.96s;
-o-transition-duration: 0.96s;
-ms-transition-duration: 0.96s;
}

.image.first:hover 
{
opacity: 0.00;
}
 
div.ImgField 
{
display: inline-block;
background-position: center center;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}

3. А этот код нужно вставить в раздел body сайта, где планируете показ изображений:


<div  class=ImgField>
<img class="image first" src="img/sk2.jpg" alt="">
<img class="image second" src="img/sk3.jpg" alt="">
</div>

          Путь к картинке при загрузке страницы и при уводе курсора мыши.

          Путь к картинке при наведении курсора мыши.

Исходники (289 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Вот и весь простенький урок. Надеюсь, всё понятно. Здоровья Вам! Не забывайте делать добро другим людям! Ваш Л.М.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка