Like us on Facebook to get the latest links daily

Sunday, October 20, 2013

CSS single image rollover banner with transition effect tutorial


You must have seen some sites are using slider banner or clickable banner link with some transition effect on it. You will find some other tutorial in search how to create rollover effect using JQUERY.

CSS single image rollover banner with transition effect

            In this tutorial you will learn a simple way to create a clickable rollover banner. This kind of transition effect is mainly created using a single piece of image. This single image is separated in two sections (i) Color image section (ii) Black and white image section.

           These sections are used for two different link states (If you wish you can use it for three states).
One for default states and other for the hover state. Basically the black and white image section is used for default states and color image section is chosen for the hover state. But there is no restriction of your using that thing; it is completely up to you how you display your link to your visitors. This type of css is very useful for web designers. You can also make css rollover button from this tutorial(for CSS rollover button change "Y" position in background-position style tag).

Write the following code inside head tag of your html page.

CSS single image rollover banner with transition effect

Now, write the following code inside the body tag of your html page.


CSS single image rollover banner with transition effect
Download sample code from here.


It’s my request to you not to use this code for commercial purpose. If this tutorial helped you, don’t forget to like our facebook page. Add me to your google+ circle for more updates and cool tutorial.


Get E-mail Subscription for Latest Updates


Don't forget to Click on activation link , sent to your E-mail ID

You might also like:

Related Posts Plugin for WordPress, Blogger...