Image filter, grayscale and darker?

**Peter Westerlund** · Jun 17, 2009 10:49

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?

**Arlen** · Jun 17, 2009 11:45

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.

**coothead** · Jun 17, 2009 11:54

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>

**Peter Westerlund** · Jun 17, 2009 11:59

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

**coothead** · Jun 17, 2009 12:09

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

User Tag List

Thread: Image filter, grayscale and darker?

Thread Tools

Display

Image filter, grayscale and darker?

Bookmarks

Bookmarks

Posting Permissions