Web Design expert - XHTML & CSS developer - jQuery builder - Graphic Designer
FFA employee - Husband - Step Dad - Brother - Son - Believer - Basketball player
Oil Painter - Percussionist - Pitt Illumni - ESPN Fanatic - Red Box enthusiast

Blog | Dec 4, 2011

Easy CSS Rollover Effect

Have you ever been in a situation where a link failed to show its image after you hovered it properly? Maybe it just didn't catch initially, but every other time it worked? Guess what - don't waist your time or take the risk in designing multiple images for rollovers anymore. Simply design "one" image with 3 different states (top middle bottom), and properly adjust the CSS background position of this "one" image in 3 different hover actions. This example is very simple and easily tackles the issue. Good luck!


#myRoll {

	padding:0;

	margin:0 10px 0 0;

	display:block;

	width:54px;

	height:56px;

	overflow:hidden;

	text-indent: -10000px;

	font-size:0;

	line-height:0;

	background: transparent url(your image) no-repeat center -56px;

}



#myRoll:hover {

/*set your initial rolling position*/

	background-position:center 0px;

}



#myRoll:active {

/*set your active or visited positioning*/

	background-position:center -112px;

}