sprite for hover effect sliding from image to image - css

Question

I have a social icons in sprite image, and hover effect is sliding when hovering.
I don't want it to, I want it to act just like if i use a regular image, when hover an image the image is changed, also I want to add CSS3 transitions to it.
This is the site: [Site][1]
/*Social Icons*/
#social_icons {
width: 18%;
height: 37px;
display: inline;
position: absolute;
bottom: 0;
left: 185px;
}
.social-roll {
height: 40px;
width: 42px;
margin: -3px;
display: inline-block;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out; }
.ico-facebook, .ico-facebook-hover, .ico-googlep, .ico-googlep-hover, .ico-linkedin,
.ico-linkedin-hover, .ico-message, .ico-p, .ico-p-hover, .ico-twitter,
.ico-twitter-hover{
display: inline-block;
background: url('../images/icons/social.png') no-repeat;
overflow: hidden; }
.ico-facebook {
background-position: -3px -0px;
width: 40px;
height: 40px;
}
.ico-facebook:hover {
background-position: -46px -0px;
width: 40px;
height: 40px;
}
.ico-googlep {
background-position: -89px -0px;
width: 40px;
height: 40px;
}
.ico-googlep:hover {
background-position: -3px -43px;
width: 40px;
height: 40px;
}
.ico-linkedin {
background-position: -46px -43px;
width: 40px;
height: 40px;
}
.ico-linkedin:hover {
background-position: -89px -43px;
width: 40px;
height: 40px;
}
.ico-message {
background-position: -3px -86px;
width: 40px;
height: 40px;
}
.ico-p {
background-position: -46px -86px;
width: 40px;
height: 40px;
}
.ico-p:hover {
background-position: -89px -86px;
width: 40px;
height: 40px;
}
.ico-twitter {
background-position: -3px -129px;
width: 40px;
height: 40px;
}
.ico-twitter:hover {
background-position: -46px -129px;
width: 40px;
height: 40px;
}
[1]:

Answer 1

Just remove the transition effect:
.social-roll {
height: 40px;
width: 42px;
margin: -3px;
display: inline-block;
/* transition: all 0.9s ease-in-out 0s; */
}
Note: You need to specify what kind of transition you want

Answer 2

You have a rule set defined as below
.social-roll {
display: inline-block;
height: 40px;
margin: -3px;
transition: all 0.9s ease-in-out 0s;
width: 42px;
}
either you remove the transition property from the above rule or add a new property in the below rule set
.ico-facebook, .ico-facebook-hover, .ico-googlep, .ico-googlep-hover, .ico-linkedin, .ico-linkedin-hover, .ico-message, .ico-p, .ico-p-hover, .ico-twitter, .ico-twitter-hover {
transition: none;
}