Image may be NSFW.
Clik here to view.
In this tutorial I will show you how you can apply a cool scrolling effect to images using CSS. When you hover an image it will change its image with a cool scrolling effect. No javascript / jquery is used, just CSS.
I will use a twitter icon to explain with an example.
Step 1: Prepare image
We need two images that will change on hover. Prepare an image such that upper half contain first image and lower half contain second image. I will use below image here.
Image may be NSFW.
Clik here to view.
Step 2: Prepare HTML code
Our next step is to write HTML code. Lets’ write simple HTML code to display this icon:
<a id ="twitter" href="https://twitter.com/techyag"></a>
Step 3: CSS
Now add following CSS style.
#twitter { }
a#twitter{
width:58px;
height:58px;
display:block;
background:url("img/icon.png") no-repeat;
background-position:0 0;
-webkit-transition-property:background-position;
-moz-transition-property:background-position;
-o-transition-property:background-position;
transition-property:background-position;
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
a#twitter:hover{
background:url("img/icon.png") 100% 0 no-repeat;
background-position:0 100%
}
Done!!!
You can check live demo of this tutorial here:
