204 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 500+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
r0nka says

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?

4323 posts ThemeForest Reviewer
  • Has referred 1+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Member of the Envato Team
+12 more
Ivor Envato team says

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.

1734 posts
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VisualSharing says

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 .

1028 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
ThemeBlvd says
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

204 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 500+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
r0nka says

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

2324 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
+6 more
CreativeMilk says

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)

204 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 500+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
r0nka says
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?

3007 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 200+ members
  • Has sold $250,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+7 more
duotive says
2324 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
+6 more
CreativeMilk says
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.

204 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 500+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
r0nka says
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?

by
by
by
by
by
by