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 and 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. Get all photo gallery.

Demo

You may like these articles

Stylish Sliding Up Image Description for Blogger
Stylish jQuery Image Menu For Blogger
Awesome Jquery Rotate Effect For Blogger Images
Awesome CSS3 Image Circle Hover Effect For Blogger

How to add Css3 Peel Image Effect For 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 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/AVvXsEjA5H-Vn9HhNPfDUU9MpsCVKX65QJUWkQ00jPhJfBywN-tbyI97BriUjddogKHyzlcCTgdjNqlMc-eBsmV9_2inTVJKFE4exPvDY2AoQ1kVgL1ZZRsnd7qBm0RPaOzzFYXRu-TWtLRE8cE/s1600/sunset-sunrise-btrix+(1).jpg" />
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLsDzojgTofFClJLBDnte3e0QzPIi8bwiU4WjcN-jGkXtmLI6Q8kiZ1mLpiP3EK95L3EDm4sfVSetL5DFBqtG30QZPefbE9LkMxBYqLr-zJ4GZ8r9gb1Ch1f2bzwM1HEyjCm9xJrdfjAU/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>

5. Now save your HTML/Javascript'. You are done.

You can add this Css3 Peel Image Effect to blogger post too.

Share this post