wanner Posted April 6, 2007 Share Posted April 6, 2007 Is it possible to desaturate an image with CSS?I want my thumbnails to be greyscale and to light up in color when the mouse hovers over them.And i dont want to use multiple images :/.Thanks Link to comment Share on other sites More sharing options...
pulpfiction Posted April 6, 2007 Share Posted April 6, 2007 This should help....http://www.allhtmlcodes.com/image_effects.php?effect_id=1 Link to comment Share on other sites More sharing options...
jlhaslip Posted April 6, 2007 Share Posted April 6, 2007 Just a small point: those filters are MS proprietary code and only seems to work on IE6. Didn't work for me in FF2 or IE7. Link to comment Share on other sites More sharing options...
pulpfiction Posted April 6, 2007 Share Posted April 6, 2007 Sorry missed to mention that..... it works in IE only. Also as far as I know there's no alternative, as the filter is non-standard crap which IE has in a pathetic attempt make itself look good. Link to comment Share on other sites More sharing options...
wanner Posted April 6, 2007 Author Share Posted April 6, 2007 Sorry missed to mention that..... it works in IE only. Also as far as I know there's no alternative, as the filter is non-standard crap which IE has in a pathetic attempt make itself look good.Hmpf, then ill guess ill have to live without it. Im not interested in IE only stuff. Link to comment Share on other sites More sharing options...
aalbetski Posted April 6, 2007 Share Posted April 6, 2007 you can use opacity to achieve a similar (though not exact) effect. This will work cross-broswer: <style> img.grayme { opacity:.20; filter: alpha(opacity=20); -moz-opacity: 0.2; }</style><img src="yourimage.jpg" class="grayme" onmouseover="this.className=''"; onmouseout="this.className='grayme'"/> visit here for more tricks:http://www.mandarindesign.com/opacity.html Link to comment Share on other sites More sharing options...
wanner Posted April 6, 2007 Author Share Posted April 6, 2007 you can use opacity to achieve a similar (though not exact) effect. This will work cross-broswer:<style> img.grayme { opacity:.20; filter: alpha(opacity=20); -moz-opacity: 0.2; }</style><img src="yourimage.jpg" class="grayme" onmouseover="this.className=''"; onmouseout="this.className='grayme'"/> visit here for more tricks:http://www.mandarindesign.com/opacity.html Im using opacity atmBut thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now