How to Change image on rollover(MouseOver) in CSS

Its been a long time since i've posted an article. Today iam posting something that is easy to implement and is used widely these days i.e, changing an image on rollover(mouseover).Let's start with the simple mark-up

HTML:
 <a href="#" id="iconchange">Icon</a>

Now lets come to the css

CSS:

#iconchange{

height: 20px;

width: 158px;

text-indent: 10000px;

overflow: hidden;

background: url(icon.gif) top left no-repeat;

display: block;

}

#iconchange:hover{

background-position: bottom left;

}

That's it. its simple as that. Go now and use it in your project designs.:)