I have a image I want to use as a rollover image by shifting the image up while the user hovers over it.

The code I have so far is below. The image shows up I just can't get the rollover effect to work.

HTML

<li>
<div class="box_label" id="trophy-whitetail-news_label"></div>
<div class="box_image" id="trophy-whitetail-news_image"></div>
<div class="box_text" id="trophy-whitetail-news_text">
<p><b>Trophy Whitetail News</b></p>
<p>Sign up for news on topics such as Whitetail Nutrition, Hunting Tactics, Hunting Gear and Promotions.</p>
<a class="box_btn" id="trophy-whitetail-news_btn" href="timberghost-coupons.html" target="_blank">Sign Up Today</a>
</div>
</li>

CSS

#hp_boxes #trophy-whitetail-news_btn {
background: url(images/trophy-whitetail-news_btn.png) no-repeat;
width: 130px;
height: 28px;
display: block;
text-indent: -99999px;
}

.box_btn:hover{
background-position: 0 -28px;
}

Here is a link to the page.. TimberghostShop

The links in question are the three buttons in the three boxes below the rotating banner ad.

I have been scrutinizing this thing for a couple of hours now. My patience has run out.

Any help is appreciated.

Josh

Its cause you only put 0 -28px
you would need to put 0px -28px 0px 0px
as what you told it was (if i am correct...) left and right = 0px top and bottom = -28px

http://www.webmaster-talk.com/css-fo...ml#post1010275

Thanks for the replies guys but neither of these really offer any further insight.

The background-position property is different from other CSS properties such as padding or margin in that background-position is defining the position of the background and only needs two inputs: an x value and a y value.

I thought surely that as long as I had looked at this that there was some simple syntax error to blame.

If anyone sees my error please let me know.

Thanks,
Josh

Bump.. Still having problems.

Chris, I followed the link you gave but it didn't really offer much help as far as the code syntax goes. Is there anything wrong with the code I have listed?

Josh

.popup {
      background-position: center 50px;
}
.popup:hover {
      background-position: center top;
}

Then anything with a class of "popup" applied will have a background that "jumps" up 50 pixels on hover.