Loading





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

eTXT




Анкетка


Эффект замены изображений при наведении мыши


При наведении курсора мыши изображение в блоке меняется на другое. Исходное и конечное изображение могут отличаться размерами. Вторичное изображение приобретает слегка заметные тени, что придает ему эффект парения. Здесь используются возможности CSS3 анимации и правило keyframes. Эффект работает во всех современных браузерах.


Демо-пример

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


2. А этот код скопируйте и расположите в разделе body:


<div class="pulloutimage" style="width:500px; height:378px">
<img class="original" src="img/paris10.jpg" alt="изображение">
<img class="ondemand" src="img/paris11.jpg" alt="изображение">
</div>

<br><br>
<div class="pulloutimage" style="width:500px; height:378px">
<img class="original" src="img/paris12.jpg" alt="изображение">
<img class="ondemand" src="img/paris13.jpg" alt="изображение">
</div>


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



Демо-изображения:
изображение
изображение
изображение
изображение

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

Спасибо за внимание. Всех благ! Посещайте мой сайт. Пока! L.M.


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




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







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