Image hover effect

I searched on the web for a tutorial for a image hover effect and i didn’t found what i was searching for. Im searching for something like this, that not require me making 2 images for each image i want to get the hover effect(like here).

any tutorial online?

I used this two days ago and is very easy to follow – http://jqueryfordesigners.com/image-fade-revisited/ you can use sprites, it’s better for perfomance.

If you want a gray-scale image on hover, I don’t think you can do it on the front-end. You need the GD library for PHP .

I used this two days ago and is very easy to follow – http://jqueryfordesigners.com/image-fade-revisited/ you can use sprites, it’s better for perfomance.

This will help, too, on the same example Ivor is talking about:

http://labs.dragoninteractive.com/pufferfish.php

This is not what im searching for .. see the freshface theme that i gave for example.

This is pretty easy to do, just create an extra element like an div, give it an background color(white), set it to display none. Make sure that if overlays the images.

Use jQuery to, when hover over an images, that the div fade’s in(opacity 0.5)

This is pretty easy to do, just create an extra element like an div, give it an background color(white), set it to display none. Make sure that if overlays the images. Use jQuery to, when hover over an images, that the div fade’s in(opacity 0.5)

I dont really know jQuery and all that scripting is there any tutorial online?

google is your friend http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

google is your friend http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

this can do the trick but you still have to use 2 images for this tut.

google is your friend http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

this can do the trick but you still have to use 2 images for this tut.

yes,
I thought on an idea, making an image that half transparent on put it on top the image. is that possible?