Home/ Questions/Q 8415579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T01:29:04+00:00

I am attempting to make some rollever effects on a splash page I’m creating

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0