CSS background-position change on Y-Axis only

Ok...so here is the problem.

I have a CSS sprite image made up of ten(10) 25px x 25px icons laid out horizontally - thus resulting in a sprite image of 250px width.

I am using these 25x25 images as thumbnails. I'm looking to have an opacity of 30% on these images in INITIAL view and when a user hovers over them the opacity needs to be 100% (1).

So what I did was create a SECOND row of images with their opacity at 30% - so now I have a sprite image of 250px x 50px. The top 25px at 100% and the bottom 25px at 30%.

I setup HTML as follows:

<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
etc...

and the CSS:

a { display: block; float: left; width: 25px; height: 25px; background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat; }
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
a:hover { **background-position-y**: -25px; }

However, this doesn't appear to work unfortunately, as background-position-y is NOT supported in Firefox (or is not a standard, but is IE-specific).

The idea is that we (only) want to SHIFT the sprite image UP (along y-axis) and leave the x-axis as is (or was set in the previous classes).

If there is no simple CSS solution to this - can this opacity effect be done with JQUERY? So the thumbs would load at 30% opacity and would transition to 100% opacity when user hovers?

Many thanks,

jquery css background

Edit Report

Note: For this to work in Mozilla, the background-attachment property must be set to "fixed".

Does that have any bearing?

You only have 10 images, just define a css class for each one. That way you can specify the relative x coord.

ps. I hope you aren't using that exact css, applying that style to a:hover would apply to all links on the page. You should be applying it to only the imaged style.

a { display: block;
    float: left;
    width: 25px;
    height: 25px; 
    background: url("test.jpg") 0 -25px no-repeat;
  }
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
.thumb1:hover { background-position: 0 -25px; }
.thumb2:hover { background-position: -25px -25px; }
.thumb3:hover { background-position: -50px -25px; }

There is also opacity..

answered 2009-05-03T20:58:48.603

CSS background-position change on Y-Axis only

1 Answer

Your Answer