Фотоэффекты онлайн-подмена фото.



Замена фото при наведении курсора мышки на другое или создание фотоэффектов с изображениями на страницах блога. Реализовать спец эффект подмены одного изображения на другое можно легко при помощи CSS.Всего лишь небольшой фрагмент кода и ваши фото приобретут совсем другой вид радующий взор посетителей.








Установка кода для замены фото.


Установить код CSS для реализации подмены фото необходимо в шаблон блога в раздел для стилей.Сама процедура установки кода CSS описана уже многократно и прочитать как установить и одновременно узнать ещё один из креативных эффектов для фото можно перейдя по ссылке. Перед вами сам код CSS,его то и надо скопировать и вставить.
<style type="text/css">
a.v-g{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 470px;
height: 280px;
}
a.v-g img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease;
-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);
}
a.v-g img:nth-of-type(2){
z-index: 1;
}
a.v-g:hover img:nth-of-type(1){
clip: rect(0,0,434px,0);
opacity: 0.9;
}
</style>

Смотреть ещё

Слайдер- ротатор для блогаРотатор для баннеровЭффекты для фото на CSS.Как добавить форум на блогОформление блоков для кода

Следующий шаг это непосредственно при редактировании страницы фото,к которым необходимо применить данный эффект, следует добавить класс. В результате изображения,которые будут замещать друг друга должны быть заключены в контейнер такого вида
<a class="v-g"><img src="ссылка на фото 1" alt=""><img src="ссылка на фото 2" alt=""></a>

подмена фотоФотоэффекты онлайн-подмена фото.


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