How to give css sprites effect? - css

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