Mouse Duyarlı Değişen Resim Efekti

Blogger Fare Duyarlı Resim Kodu

Resmin üzerine gelince hover etkisiyle değişen resim efekti kodu.




Mantıklı bir düzende çok güzel ve işlevsel olarak ilgi çekişci bir eklenti olarak kullanılabilinir.

<style type="text/css">
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 550px;height: 400px;}
a.nowandthen 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.nowandthen img:nth-of-type(2){z-index: 1;}
a.nowandthen:hover img:nth-of-type(1){clip: rect(0,0,434px,0);
opacity: 0;
}
a.nowandthen.alt{ width: 300px;height: 354px;}
a.nowandthen.alt img{clip: rect(0,300px,354px,0);}
a.nowandthen.alt:hover img:nth-of-type(1){clip: rect(0,0,354px,0);}
</style>
<a class="nowandthen">
<img alt="webseyyahı" src="1. RESİM URL"/>
<img alt="webseyyahı" src="2. RESİM URL"/>
</a><!--Author: webkenti.net-->

width: 550px; height: 400px; : Genişlik ve yükseklik ölçüleri px.

HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.



* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.