CODEWITHSUNDEEP
htmlcss
Bryan
Bryan

Reputation: 3009

CSS rollover image

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;}

enter image description here

EDIT: HTML:

 <div id="next">

 </div>

CSS:

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

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

Upvotes: 0

Views: 3175

Answers (4)

Francis Kim
Francis Kim

Reputation: 4285

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.

Upvotes: 1

Ding
Ding

Reputation: 3085

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;
}

Upvotes: 1

Sachin
Sachin

Reputation: 40970

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

CSS

div
{
    height:40px;
    width:160px;
    background-image:url('https://i.sstatic.net/OOGtn.png');
}

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

JS Fiddle Example

You can also look into CSS Sprites.

Upvotes: 2

Mark Parnell
Mark Parnell

Reputation: 9200

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

Upvotes: 1

Related Questions