SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Greyscale Filter

    Hi there,

    I am trying to get some images to be greyscale using the i.e css filter, and then when i rollover the greyscale to be removed...this does not seem to be working...if someone can check my css and help me out..

    Thanks

    PHP Code:
    #indexthumbnail img,#smallthumbnail img

    {



        -
    moz-opacity:.70;

        
    opacity:.70;

        
    padding-left:7px;

        
    padding-top:7px;

    }


    #indexthumbnail img:hover,#smallthumbnail img:hover

    {

        
    filter:gray;

        -
    moz-opacity:1;

        
    opacity:1;



  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump*

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ANyone help me please..i need help as im really stuck...

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ie only applies hover to anchors so you would need to do it like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #indexthumbnail img,#smallthumbnail img
    {
    	filter:gray;
    				-moz-opacity:.70;
    	opacity:.70;
    	padding-left:7px;
    	padding-top:7px;
    }
    
    #indexthumbnail a:hover img,#smallthumbnail a:hover img
    {
    	filter:normal;
    	-moz-opacity:1;
    	opacity:1;
    } 
    #indexthumbnail a:hover{visibility:visible}/* ie needs this*/
    
    </style>
    </head>
    
    <body>
    <p id="indexthumbnail">
    	<a href="#"><img src="img.jpg" width="300" height="225" alt="Example image" /></a></p>
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •