Blogger Click CSS3 Peel Görüntü Efekti

<style type="text/css">

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; 
height: 434px; 
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease; 
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s 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;
}

</style>

<a class="nowandthen" href="http://www.blogger.com/null">
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9cyEylzbHyr2gobS8OWI0sKUzwsTzOrnVPOmT2Y02Jm7u29sKs0x2EswItukh0zvvHfIHDM23ZdfAeRgipPr36oIY6prS-YFSaSct_hEWDoSgMiW5bFxwp5EEju4VSxPEmSmAkDZcNKQ/s1600/sunset-sunrise-btrix+(1).jpg" />
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQluHJroeO67AT9oHU6eg7H_UaJ3yynLCf1ppbUZVFcO-utwJnikV5bJeOP4M82GPRHnop57I_2L6GtDeagZ0BR-d94nY5DusXuAUP-lV9BYcDMT8LQK-vNspzLl_Wxp6CXpQb4q7nl20/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif   Etmeyi Unutmayınız!