Css3 Cool Peel Image Effect For Blogger

Css3 Cool Peel Image Effect For Blogger

In  this  article  i am  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. I am using CSS and HTML
for  this  widget. you  can  use  your  own  image  by changing  links  i mentioned  end of the code.

Peel Demo

How To Add Cool Peel Image Effect Into Blogger

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="htpp://s2free.blogspot.in">
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Dk5NC1TjTBoY0mOQdnaFLrz6w8P0AR0zLBj1LTUKEWLADmwGsMbc2oNg0Tha1ty8L8_hEqn9aVgBI664Qx0xrfNtPDfztjPCh3No4g6bkxqMpPSc9BSeAjO9_rc5k78MFVD98wLkyWU/s1600/sunset-sunrise-btrix+(1).jpg" />
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidqZEvs9aAfhQtK7XEbAfPQaY8y0fXcgUsrHmVlAfZIf1u8PlvVMD7iXS7RKKsr6zExUeUTokCVwdw8Jy4Ml9oqmYJeTxTMA5NqVamuFeo6Oh73ywo_2knhvy7mZijjtFsvNsKoUCsrq4/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>

 5. Now save your HTML/Javascript'.



    You are done...
Note : Change Your Link With htpp://s2free.blogspot.in