views:

4371

answers:

4

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,

M.

+1  A: 

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..

jim
no it doesn't, unfortunately. we totally lose background images.
Mo Boho
revised, hope it helps
jim
Updated with example code: seems to do what you want I think.
jim
I am aware of what you did there - setting a :hover on each element individually - and it's fine in the example I gave. The only problem is when you have a much larger number of thumbs - we end up with a lot of bloat CSS when we add all those additional :hover entries for EACH thumb. It's a shame there isn't (or is there?) some BACKGROUND-POSITION-Y command - which would ONLY allow us to move the referenced item along the **Y-axis** while leaving the X-axis wherever it was previously set.
Mo Boho
javascript would suit you here.
jim
+2  A: 

I believe Lou's answer does what you want it to do -- you just have to define a class for each state and set both x and y coordinates.

If you wanted the effect of fading, then jQuery gives you a way to do it. This could probably get you what you want if that's the case:

$(".thumb").css("opacity", 0.33);
$(".thumb").hover(
    function() {
     $(this).fadeTo(300, 1.0);
    },
    function() {
     $(this).fadeTo(1, 0.33);
    }
);

EDIT: Updated based off feedback. Initial opacity is now set.

Zack Mulgrew
Hi Zack, the only problem is with the bloated code that would result using that method when there A LOT of thumbs. I'm hoping to cut that...and so perhaps we may have to resolve to jQuery to do so. :)So with your example above, is it initially faded? and then it fades to 100%? Or is do we set the opacity in CSS first and then it fades to 100%? Is there a way to do this all in jQuery (including the initial opacity) as opacity is a CSS3 standard and we know how that's still not fully supported yet across the spectrum?
Mo Boho
thank you, Zack! :) although I would've preferred a CSS solution - when one doesn't present itself, we'll go with jQuery! :) Many thanks for your help.
Mo Boho
+2  A: 

You do not need a second icon set nor the use of JavaScript to achieve the desired effect.

As Lou pointed out, use opacity to make your icons 30% or fully visible. No need to mess with background-position anymore.

Just go ahead and define your styles accordingly to the following:

a {
    opacity:0.3;  /* for standard browsers */
    filter: alpha(opacity = 30);  /* for IE */

    display: block;
    float: left;
    width: 25px;
    height: 25px;
    background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat;
}

a:hover {
    opacity:1.0
    filter: alpha(opacity = 100);
}

.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }

If you are worried about validation of your CSS code, take the IE-specific parts (which won't validate) and put them in specifically targeted CSS files via conditional comments.

Hope that helps.

Matze
This technique is really brilliant! I hope more people will upvote it and make it the top answer.
Jesper Rønn-Jensen
A: 

Some small omissions, typos and unnecessary code in the previous example. Guess your code could look something like this:

<style>
a { float: left; width: 25px; height: 25px; background-image: url("250_x_50_spriteimage.jpg"); }
a.thumb1 { background-position: 0 0; }
a.thumb2 { background-position: -25px 0; }
a.thumb3 { background-position: -50px 0; }
a { filter: alpha(opacity=30); -moz-opacity:.3; opacity:.3; }
a:hover { filter: alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; }
</style>

<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb2"></a>
<a href="largeimage2.jpg" class="thumb3"></a>
Michiel