Grow your CSS skills. Land your dream job.

how to make grayscale with CSS or jQuery?

  • # June 12, 2009 at 8:30 am

    Hello,

    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="http://www.mediabistro.com/agencyspy/original/gossip_girl.JPG&quot; class="myimg" width="800" height="600" style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)" onmouseover="this.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)’" onmouseout="this.style.filter = ‘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 http://php.about.com/od/gdlibrary/ss/grayscale_gd.htm – 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.

*May or may not contain any actual "CSS" or "Tricks".