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

Эффект простой, но достаточно изящный. Интересно посмотреть на изображение, которое как будто меняет фон при попадании курсора в границы картинки, а главный объект остаётся неизменным или происходит полное преображение картинки. Таким образом можно создавать картинки-шутки (например, посмотри на себя в старости, мгновенное облысение, эффект раздевания и т.п.) или что-либо другое, в зависимости от широты вашей фантазии. Этот пример показывает, что используя CSS3 анимацию, можно успешно оживить любую картинку. Чтобы создавать нужные изображения для данного эффекта, необходимы хотя бы первоначальные знания программы Photoshop или подобных ей.


Демо-пример Исходники (534 кб)

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


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

1. Распаковать архив с материалом в текущую папку на компьютере. В папке zamenakartinky находятся:

  • папка img с изображениями;
  • файл стилей style.css (нужен только для демонстрации);
  • файл demo.html.

2. Откройте в вашем браузере файл demo.html и проверьте корректность работы эффекта. Если всё хорошо, можно приступать к переносу всего на свой сайт.

3. Подготовьте нужные изображения и поместите их в папку img вашего сайта.

4. Файл demo.html содержит все необходимые коды. Ниже представленный код из этого файла нужно вставить в раздел head или файл стилей сайта:


<style type="text/css">
a.nowandthen{
position: relative;
display: block;
overflow: hidden;
cursor: pointer;
width: 650px; /* set width of image container */
height: 434px; /* set height of image container */
}

a.nowandthen img{
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; /* enable transition */
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,650px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */
}


a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */
z-index: 1;
}


a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */
clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */
opacity: 0;
}



a.nowandthen.alt{
width: 300px; /* set width of image container */
height: 354px; /* set height of image container */
}

a.nowandthen.alt img{
clip: rect(0,300px,354px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,354px,0); /* clip values should be rect(0,0,image_height,0) */
}




a.nowandthen.ras{
width: 289px; /* set width of image container */
height: 459px; /* set height of image container */
}

a.nowandthen.ras img{
clip: rect(0,289px,459px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen.ras:hover img:nth-of-type(1){
clip: rect(0,0,459px,0); /* clip values should be rect(0,0,image_height,0) */
}




a.nowandthen.qwe{
width: 351px; /* set width of image container */
height: 511px; /* set height of image container */
}

a.nowandthen.qwe img{
clip: rect(0,351px,511px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen.qwe:hover img:nth-of-type(1){
clip: rect(0,0,511px,0); /* clip values should be rect(0,0,image_height,0) */
}


</style>

Для добавления очередной картинки в CSS вставляйте дополнительно участок кода:


a.nowandthen.qwe{
width: 351px; /* set width of image container */
height: 511px; /* set height of image container */
}

a.nowandthen.qwe img{
clip: rect(0,351px,511px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen.qwe:hover img:nth-of-type(1){
clip: rect(0,0,511px,0); /* clip values should be rect(0,0,image_height,0) */
}

В каждом новом участке пропишите свой идентификатор и размеры изображений.

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


<a class="nowandthen">
	<img src="img/before1.jpg" alt="">
	<img src="img/after1.jpg" alt="">
</a>

<br><br>
<a class="nowandthen alt">
	<img src="img/before2.jpg" alt="">
	<img src="img/after2.jpg" alt="">
</a>


<br><br>
<a class="nowandthen ras">
	<img src="img/before3.jpg" alt="">
	<img src="img/after3.jpg" alt="">
</a>

<br><br>
<a class="nowandthen qwe">
	<img src="img/before4.jpg" alt="">
	<img src="img/after4.jpg" alt="">
</a>

Здесь проставьте названия ваших картинок и атрибут alt. Для очередной картинки вставляйте дополнительно участок кода:


<br><br>
<a class="nowandthen qwe">
	<img src="img/before5.jpg" alt="">
	<img src="img/after5.jpg" alt="">
</a>

Спасибо за внимание. Посещайте мой сайт, здесь Вы найдете много интересных решений. Пока! L.M.


Ваше мнение по материалу, изложенному на сайте




  © 2015–2024  dynamic-site.olerant.ru  L.M. Служба поддержки Яндекс.Метрика