homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS image rollovers

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

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)


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)

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

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)

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?

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved