image mask/layer in html

[norfolkmustard]

I've seen it before but forgot to see how it was done. Images in a webpage that appear greyscale until you hover the mouse over them, then they become full colour.

I think I saw it in some gallery software. thumbmails were greyscale at first; hover = colour

anyone know how it's done? example?

cheers

[fergusd]

Hey Stu, how's tricks . . .

IIRC the colour change on hover is a javascript thing, you just need both the images . . . and it flips between the two . . .

google ?

Fd

[norfolkmustard]

cheers dude.

I was hoping it was just some clever screen rather than having to create greyscale copies of the images. I'll keep googling.

See you in May

[simpo two]

I think the phrase is 'mouse hover'. My trusty old FrontPage does this although the options are limited.

[PetrolTed]

You could do that with a stylesheet and no javascript (assuming clicking the picture links to somewhere).

Haven't tested this and it will work for IE only but something along the lines of...

a.photo { filterrogidXImageTransform.Microsoft.BasicImage(grayscale=1); }

a.photo:hover { filter: none; }

<a class="photo" href="largephoto"><img src="thumbnail.jpg/></a>

Google on CSS+gray+filter for more info

[norfolkmustard]

you da man

[norfolkmustard]

I don't actually need it to change when hovering now, so this works fine

in css:

img {
filter: gray;
}

style:

style="filter:gray"

Also seems to be IExplorer specific though.

[PetrolTed]

Did anyone hear what I said?

[fergusd]

Only work in IE . . . shame on you !

Fd

>> Edited by fergusd on Saturday 12th March 23:52