Css3 Peel Image Effect For Blogger

In  this  article  im  gonna  explain  how to add Css3
Peel Image Effect For Blogger for  blogger. You can
add  this  widget to  your  sidebar. If  you  want, you
can  add  a link  to image. Im using CSS and HTML
for  this  widget. you  can  use  your  own  image  by
changing  links  i mentioned  end of the code.Follow 
these  step to  add to  your blog.

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<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/AVvXsEjH8s2fRzrxvp7x-oHGfAKeW84jmGFmiJ9JRE32YzdLAjSbkplyzFiPWW5zLFP3UTHTcw_HoOTniJ4HnNyVDuk5gud6GnudX7q-iMeltYcAGP24ydtGZmYEXBDe-pWd-rig80ZQPI_-QMY/s1600/sunset-sunrise-btrix+(1).jpg" />
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEaA-dzov9qSW7W_v9KcKKAr4C6fv3pcqVG5mLI2wR2cli37OgZKbmj0s3m3-rjNmQ77e4nkGs-aizMoLyj2wO6-RUg5csTeeabNXAAhxAl1E6rssI1PPCjtGQrOzsPFwdoEf5v4hhJl0/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>

5. Now save your HTML/Javascript'.

    You are done...