Search
 
 

Display results as :
 


Rechercher Advanced Search

Latest topics
» APC – December 2017
Thu Nov 09, 2017 7:28 pm by Admin

» iCreate UK – November 2017
Thu Nov 09, 2017 7:25 pm by Admin

» Transformers First Strike #1 [2017]
Thu Nov 09, 2017 7:19 pm by Admin

» Batman – Lost #1 [2017]
Thu Nov 09, 2017 7:15 pm by Admin

» Movavi PDF Editor v1.0 Multilingual
Sat Oct 14, 2017 9:59 pm by Admin

» Fast Bikes – November 2017
Sat Oct 14, 2017 9:56 pm by Admin

» Success: The Psychology of Achievement by DK
Sat Oct 14, 2017 9:54 pm by Admin

» The World’s Scariest Places by The Editors of LIFE
Sat Oct 14, 2017 9:51 pm by Admin

» Hunting Pirate Heaven: In Search of Lost Pirate Utopias by Kevin Rushby
Sat Oct 14, 2017 9:50 pm by Admin

RSS feeds


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 



How To Add Css3 Peel Image Effect For Blogger

View previous topic View next topic Go down

How To Add Css3 Peel Image Effect For Blogger

Post by Admin on Thu Jun 06, 2013 12:34 am

In this article i'm going to explain how to add Css3 Peel Image
Effect 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
mentioned at the end of the code.Follow these step to add to your
blog.





Live Demo




1. Log in to blogger account


2. Now select "Layout"


3. Click Add Gadget and select 'HTML/Javascript


4. Paste below one of below code.


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;
}


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://lh6.googleusercontent.com/-mRKGwEN8GlQ/UR1hcIaEk0I/AAAAAAAABWc/_-D0mfksexw/s1600/233.jpg" />
 <img alt="" src="https://lh6.googleusercontent.com/-hHHIGwN-7pU/UQgO1Y_-74I/AAAAAAAABIE/CDv7HMJM-50/s1600/lock-screen.jpg" />
</a>

</style>

5. Now save your HTML/Javascript'.


THAT'S ALL

Admin
Admin

Posts : 2759
Join date : 2012-06-08

View user profile http://yourforum.americantalk.net

Back to top Go down

View previous topic View next topic Back to top



 

Permissions in this forum:
You cannot reply to topics in this forum