CSS
.icon {
height: 32px;
width: 32px;
margin: 8px;
float: left;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.icon:hover {
background-position: 0px -32px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.fb-hover {
background-image:url(image.png);
}
.twitter-hover {
background-image:url(image.png);
}
.linkedin-hover {
background-image:url(image.png);
}
.googlep-hover {
background-image:url(image.png);
}
HTML
<div
class="fb-hover icon"></div>
<div
class="twitter-hover icon"></div>
<div
class="linkedin-hover icon"></div>
<div
class="googlep-hover icon"></div>Demo
