24
Jun
2012

Hover Scroll Animation effect using CSS

Posted in: CSS 1 Comment

css
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.

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:


About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

1 Comment to "Hover Scroll Animation effect using CSS"

Add Comments (+)
  1. Francesco says:

    Hi, thankyou for your tutorial. I would ask you if you can suggest me how can i edit this script, to have a scroll effect from left to right, where the start image is a square, and the hover image is a rectanlge.

    So when i hover the square, it scroll to the left the rectangle :)

    Sorry for my english but i’m italian :P

Leave a Reply