Multiple Hover Links in CSS - html

Question

got a row of 4 social media buttons, they all hover when I move over them. However, I cannot get the tumblr pic to work. As it stands, on the preview, it goes twitter 'linkedin - linkedin - facebook
any help? Here's the CSS code I'm using
.social a:link {
float: center;
background-image: url(../img/tumbler.png);
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
margin-left: 2px;
}
.social a:link {
float: right;
background-image: url(../img/linkedin.png);
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
margin-left: 2px;
}
.social a:first-child {
float: right;
background-image: url(../img/facebook.png);
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
margin-left: 2px;
}
.social a:last-child {
float: right;
background-image: url(../img/twitter.png);
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
}
Cheers

Answer 1

You are using the exact same CSS rule to do both Tumblr and linkedin. So background-image: url(../img/linkedin.png) is overriding background-image: url(../img/tumbler.png). Give each of your social icons a separate class and style that.
eg:
<div class = "social">
<a class = "twitter"></a>
<a class = "linkedin"></a>
<a class = "tumblr"></a>
<a class = "facebook"></a>
</div>
and css:
.social a:link {
float: right;
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
margin-left: 2px;
}
.social .twitter{
background-image: url(../img/twitter.png);
}
.social .linkedin{
background-image: url(../img/linkedin.png);
}
.social .tumblr{
background-image: url(../img/tumbler.png);
}
.social .facebook{
background-image: url(../img/facebook.png);
}
Also, check you've spelled "tumbler.png" correctly.