Hello,
I've been trying forever to get this to work. Even my CSS textbook isnt really helping much. Ok, I want to have only specific thumbnails to have this effect applied to them. They start out at 50% opacity and then when they are rolled over they change to 100% opacity. I don't want every image on the page to do this just ones that have the ID of "hovereffect". I've tried making a few rules but the only thing that DOES work is that the images are defaulting to 50% opacity. They just dont do the rollover effect.
img#hovereffect {
filter:Alpha(Opacity=50);
border-style:solid;
border-color:#000000;
border-width:1px;
}
img#hovereffect:hover {
filter:Alpha(Opacity=100);
border-style:solid;
border-color:#000000;
border-width:1px;
}
If anyone could add the correct code to what I have and let me know how something like this is supposed to work that'd be great. It's been frustrating.
-ZigguratIDs should be unique. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/global.html#adef-id">http://www.w3.org/TR/html401/struct/global.html#adef-id</a><!-- m -->) You could use a class instead. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#class-html">http://www.w3.org/TR/REC-CSS2/selector.html#class-html</a><!-- m -->)
When should I use a class and when should I use an ID? (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClassesVsIds">http://css-discuss.incutio.com/?page=ClassesVsIds</a><!-- m -->)
IE(4 through 6)/Win only support :hover on <a> elements.
Three ways to simulate :hover in IE:
<!-- m --><a class="postlink" href="http://dean.edwards.name/IE7/">http://dean.edwards.name/IE7/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.htmldog.com/articles/suckerfish/">http://www.htmldog.com/articles/suckerfish/</a><!-- m -->
whatever:hover (<!-- m --><a class="postlink" href="http://www.xs4all.nl/~peterned/csshover.html">http://www.xs4all.nl/~peterned/csshover.html</a><!-- m -->)
Only IE5.5+/Win supports filter:alpha.
Other browsers support other properties to change the opacity of an element.
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/opacity.html">http://www.quirksmode.org/css/opacity.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.domedia.org/oveklykken/css-transparency.php">http://www.domedia.org/oveklykken/css-transparency.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mandarindesign.com/opacityblending.html">http://www.mandarindesign.com/opacityblending.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mandarindesign.com/opacity.html">http://www.mandarindesign.com/opacity.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://blooberry.htmlvalidator.com/css/properties/extensions/nsextensions.htm">http://blooberry.htmlvalidator.com/css/ ... nsions.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#transparency">http://www.w3.org/TR/2003/CR-css3-color ... ansparency</a><!-- m -->
I've been trying forever to get this to work. Even my CSS textbook isnt really helping much. Ok, I want to have only specific thumbnails to have this effect applied to them. They start out at 50% opacity and then when they are rolled over they change to 100% opacity. I don't want every image on the page to do this just ones that have the ID of "hovereffect". I've tried making a few rules but the only thing that DOES work is that the images are defaulting to 50% opacity. They just dont do the rollover effect.
img#hovereffect {
filter:Alpha(Opacity=50);
border-style:solid;
border-color:#000000;
border-width:1px;
}
img#hovereffect:hover {
filter:Alpha(Opacity=100);
border-style:solid;
border-color:#000000;
border-width:1px;
}
If anyone could add the correct code to what I have and let me know how something like this is supposed to work that'd be great. It's been frustrating.
-ZigguratIDs should be unique. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/global.html#adef-id">http://www.w3.org/TR/html401/struct/global.html#adef-id</a><!-- m -->) You could use a class instead. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#class-html">http://www.w3.org/TR/REC-CSS2/selector.html#class-html</a><!-- m -->)
When should I use a class and when should I use an ID? (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClassesVsIds">http://css-discuss.incutio.com/?page=ClassesVsIds</a><!-- m -->)
IE(4 through 6)/Win only support :hover on <a> elements.
Three ways to simulate :hover in IE:
<!-- m --><a class="postlink" href="http://dean.edwards.name/IE7/">http://dean.edwards.name/IE7/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.htmldog.com/articles/suckerfish/">http://www.htmldog.com/articles/suckerfish/</a><!-- m -->
whatever:hover (<!-- m --><a class="postlink" href="http://www.xs4all.nl/~peterned/csshover.html">http://www.xs4all.nl/~peterned/csshover.html</a><!-- m -->)
Only IE5.5+/Win supports filter:alpha.
Other browsers support other properties to change the opacity of an element.
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/opacity.html">http://www.quirksmode.org/css/opacity.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.domedia.org/oveklykken/css-transparency.php">http://www.domedia.org/oveklykken/css-transparency.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mandarindesign.com/opacityblending.html">http://www.mandarindesign.com/opacityblending.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mandarindesign.com/opacity.html">http://www.mandarindesign.com/opacity.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://blooberry.htmlvalidator.com/css/properties/extensions/nsextensions.htm">http://blooberry.htmlvalidator.com/css/ ... nsions.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#transparency">http://www.w3.org/TR/2003/CR-css3-color ... ansparency</a><!-- m -->