SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Sweden
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image filter, grayscale and darker?

    I am building a gallery.

    I want the thumbnails to be gray scale and darker. Then when the visitor moves the pointer over the image, the image will get back its original appearance. How do I make this in the best way that works in most browsers?

  2. #2
    SitePoint Addict
    Join Date
    Feb 2007
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Grey scale might be difficult, but you could overlay the image with a div of the same size, background-color: black and set the opacity -- non-IE browsers listen to "opacity:0.5" but IE requires "filter: alpha(opacity=50)" to get to 50% opacity. This would effectively darken the image and then a hover could drop the bg-color.

    You could do this on server side with a call to imagemagick, but I don't know what your programming skills are.

  3. #3
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there Peter Westerlund,

    try this code with the attached image...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #thmb {
        display:block;
        width:60px;
        height:60px;
        border:3px solid #000;
        background-image:url(thumbnail.jpg);
        background-repeat:no-repeat;
        background-position:-60px 0;
     }
    #thmb:hover {
        border-color:#f00;
        background-position:0 0;
     }
    #thmb span {
        display:none;
     }
    </style>
    
    </head>
    <body>
    
    <div>
    <a id="thmb" href="#"><span>banana</span></a>
    </div>
    
    </body>
    </html>
    
    Attached Images Attached Images

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Sweden
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I feel stupid, but how do I open the attached image? :/

    Edit:
    But I'm very glad for the first reply I've got about the css filter opacity. It works fine! Thank you

  5. #5
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there Peter Westerlund,

    1. click on the attachment.
    2. right click on the image.
    3. choose "Save Image as.." and left click.
    4. choose the required directory in the dialog box.
    5. click save.
    6. have a beer.

    coothead


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
  •