The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

how to make grayscale with CSS or jQuery?

  • # June 12, 2009 at 8:30 am


    i want to grayscale image by css or jQuery if any one know plz help me

    i need to help also hover stage i found one filter but it’s only work in ie :(

    This is i found it (it’s work only ie)

    <img src="; class="myimg" width="800" height="600" style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)" onmouseover=" = ‘progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)’" onmouseout=" = ‘progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)’">

    # June 14, 2009 at 4:15 am

    The problem is that there is no really cross-browser solution to this. The filter solution only works in Microsoft browsers. There is a canvas solution that only works in browsers that support HTML5 Canvas.

    By far the best way would be to use a PHP script to convert the images to grayscale – since it will work in all browsers.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed