CSS image rollovers

possible?

[Gabekun]

What I'd like to do is have images on my site change from 50% opacity to 100% when you roll over them.

I thought this code would work, but it didn't...

 .pic  { filter  : alpha(opacity=50); }
 a.pic { filter  : alpha(opacity=50); }
 a.pic:hover { filter  : alpha(opacity=100); }

The 50% opacity does work, and I can see my background through the image, but when I rollover, it doesn't change...

Is there something that I am doing wrong? Searching the net, I can only find websites on using javascript for rollovers, which I would really like to avoid, as CSS is much easier and less time consuming (and uses less code to boot).

Any help would be apprecriated... thanks :)

Gabe

[Birdman]

Hello,

I think the filter rule is exclusively for Internet Explorer, but you probably already know that :)

I would try naming the rules like this:

.pic a, .pic a:visited{rules here}
.pic a:hover{rules here}

Hope it helps.

[MonkeeSage]

.pic, a.pic {
filter : alpha(opacity=50); /* IE */
-moz-opacity: 0.5; /* Mozilla */
}
a.pic:hover {
filter : alpha(opacity=100);
-moz-opacity: 1.0;
}

Jordan

[Gabekun]

Thank you for the replies, guys... but neither fixed the problem. While the opacity change does work, and the image is 50% transparent, but when I roll my mouse over it, it doesn't change to 100%. I'm guessing this is impossible to do, or I would have found more websites on how to do it.. :(

[moonbiter]

This works:

.pic, a.pic, [b]a.pic img[/b] {
filter: Alpha(opacity=50); /* IE */
-moz-opacity: 0.5; /* Mozilla */
}
a.pic:hover, [b]a.pic:hover img[/b] {
filter: Alpha(opacity=100);
-moz-opacity: 1.0;
}

If you only want to make the image contained in the a.pic element translucent, then you only need the highlighted selectors. If you want everthing in the link to be affected, you need to keep the others.

<edit>
Actually, I just realized I'm wrong about that last bit -- MSIE doesn't cascade the alpha filter onto any text that might be in the link, so the other, non-bolded selectors listed above are useless anyway.
</edit>

This is an example of the usefulness of descendant selectors [w3.org].

Does that make sense?