How to give css sprites effect?

Question

I am new in css sprites, i can't understand how to make my image changes in hover. I want my only one image to be change which is "Scroll To Top" website. I am trying this coding but it was not working. Images links are given below:

http://imgur.com/TM6kIqm

#toTop {
    background:url(img/scroll-to-top-2.png)no-repeat;
    background-position:0px -50px;
    width:50px;
    height:50px;
    padding: 5px 3px;
    overflow:hidden;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    cursor:pointer;
    z-index:600;
    text-decoration:none;
    border:medium none;
}

#toTop:hover {
    background:url(img/scroll-to-top-2.png)no-repeat left -29px;

    width:50px;
    height:50px;
    padding: 5px 3px;
    overflow:hidden;
    position: fixed;
    display: none;

}

Answer 1

There are a few problems here.

First, you have #toTop set to display: none, so it will never be shown, with any background.

Second, you seem to be trying to move the background image to the left on hover, rather than up/down, the way the image is built.

Third, with padding, in most browsers your height/width will be thrown off unless you use box-sizing: border-box; (which includes padding and borders in the height and width).

So (eliminating redundant properties):

#toTop {
    background: url(http://i.imgur.com/TM6kIqm.png) no-repeat;
    background-position: 0px -50px;
    width: 50px;
    height: 50px;
    padding: 5px 3px;
    -moz-box-sizing: border-box;   
    box-sizing: border-box;
    overflow: hidden;
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 600;
    text-decoration: none;
    border: none;
}

#toTop:hover {
    background-position: 0 0;
}

example: http://codepen.io/paulroub/pen/vDBaA