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.

            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.

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

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.