How to make rollover images in CSS using multiple image backgrounds and :hover pseudo

Question

I am attempting to make some rollever effects on a splash page I'm creating for a site. I would like to use CSS3's ability to have multiple backgrounds and the :pseudo class to achieve this.

Here is my attempt; however, his does not display in Dreamweaver or Chrome.

#1 {
width: 143px;
height: 142px;
background: url(../assets/Home/1a.jpg) top 0px no-repeat;
background: url(../assets/Home/1b.jpg) top -143px no-repeat;
display: inline-block;
}
#1:hover {
background: url(../assets/Home/1a.jpg) top -143px no-repeat;
background: url(../assets/Home/1b.jpg) top 0px no-repeat;
}

Any thoughts on how this could be improved or suggestions of alternate routes to achieve my goal?

Answer 1

Have u tried css sprites and wrap it with an anchor tag e.g. a:hover#l{} (

Answer 2

I think the problem is your container id: HTML ID tags can't start with a number. I got your approach working with basically no changes.

HTML

<div id="c1"></div>​

CSS

#c1 {
 border: thin solid black;
 width: 400px;
 height: 200px;
 background: url('http://lorempixel.com/400/200/sports/1/') top left no-repeat;
 background: url('http://lorempixel.com/400/200/sports/2/') top -400px;
 display: inline-block;
}
#c1:hover {
 background: url('http://lorempixel.com/400/200/sports/1/') top -400px no-repeat;
 background: url('http://lorempixel.com/400/200/sports/2/') top left no-repeat;
}

​

http://jsfiddle.net/reCSP/