| ||||||
|
Замена картинки при наведении курсора мышиЭффект простой, но достаточно изящный. Интересно посмотреть на изображение, которое как будто меняет фон при попадании курсора в границы картинки, а главный объект остаётся неизменным или происходит полное преображение картинки. Таким образом можно создавать картинки-шутки (например, посмотри на себя в старости, мгновенное облысение, эффект раздевания и т.п.) или что-либо другое, в зависимости от широты вашей фантазии. Этот пример показывает, что используя CSS3 анимацию, можно успешно оживить любую картинку. Чтобы создавать нужные изображения для данного эффекта, необходимы хотя бы первоначальные знания программы Photoshop или подобных ей.
Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master. Установка на сайт1. Распаковать архив с материалом в текущую папку на компьютере. В папке zamenakartinky находятся:
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. | |||||
|