Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS image rollovers




11:57 pm on Aug 20, 2003 (gmt 0)

10+ Year Member

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 :)



2:02 am on Aug 21, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


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.


6:32 am on Aug 21, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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



4:16 pm on Aug 21, 2003 (gmt 0)

10+ Year Member

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


4:49 pm on Aug 21, 2003 (gmt 0)

10+ Year Member

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.

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.

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

Does that make sense?


Featured Threads

Hot Threads This Week

Hot Threads This Month