JSFiddle - React, Tailwind, and code Playground

by stecb

HTML

<a id="twitter" href='http://www.twitter.com'></a>

CSS

a#twitter{
    display:block;
    background:url(http://www.livefluid.com/img/twitter-sprite.png) no-repeat 0px 0px scroll;
    width:72px;
    height:28px;
}

a#twitter:hover{
    background-position:0px -28px;
}

JavaScript

/* 
CSS SPRITES

by setting scroll to the background you can set the offset where the background starts by

background-position: X Y

it starts by x = 0 y = 0

and when you go over it, it changes to

x = 0 and y = -28px 

so it takes the bottom part of the same image

*/