CSS rollover image

Question

I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?

HTML:

<div id="next">
  <a href="page2.html"><img src="images/next3.png" alt="next page"></a>
  </div>

CSS:

#next a:hover{background: url('images/next3.png') 0 -45px;}  

EDIT: HTML:

 <div id="next">

 </div>

CSS:

#next {
      height:40px;
      width:160px;
      background-image:url('images/next3.png');
    }

#next:hover{background-position: 100% 100%;}

Answer 1

I think you need to use background-position attribute to achieve this.

CSS

div
{
    height:40px;
    width:160px;
    background-image:url('http://i.stack.imgur.com/OOGtn.png');
}

div:hover
{
    background-position:100% 100%;
}

JS Fiddle Example

You can also look into CSS Sprites .

Answer 2

You need to use it as a background in the first place. The <img> is covering the background.

Answer 3

Get rid of the image HTML and just use some CSS like this

a {
    display: inline-block;
    height: 40px;
    width: 160px;
    background: transparent url(img.jpg) 0 0 no-repeat;
}

a:hover {
    background-position: 0 40px;
}

Answer 4

In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.