206 posts
  • Author Level 2
  • Affiliate Level 6
  • 7 Years of Membership
  • Collector Level 1
+2 more
ronkathemes
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?

4483 posts ThemeForest Senior Reviewer
  • Affiliate Level 1
  • Author Level 6
  • Collector Level 3
  • Envato Team
+14 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.

1787 posts
  • Winner
  • Author Level 4
  • Exclusive Author
  • 7 Years of Membership
+2 more
OrdinaryThemes
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 .

1037 posts
  • Affiliate Level 6
  • Author Level 11
  • Collector Level 4
  • Top Monthly Author
+9 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

206 posts
  • Author Level 2
  • Affiliate Level 6
  • 7 Years of Membership
  • Collector Level 1
+2 more
ronkathemes
says

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

2337 posts
  • Affiliate Level 5
  • Author Level 6
  • Collector Level 2
  • Trendsetter
+7 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)

206 posts
  • Author Level 2
  • Affiliate Level 6
  • 7 Years of Membership
  • Collector Level 1
+2 more
ronkathemes
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
  • 6 Years of Membership
  • Affiliate Level 5
  • Author Level 9
  • Bundle Boss
+8 more
duotive
says
2337 posts
  • Affiliate Level 5
  • Author Level 6
  • Collector Level 2
  • Trendsetter
+7 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.

206 posts
  • Author Level 2
  • Affiliate Level 6
  • 7 Years of Membership
  • Collector Level 1
+2 more
ronkathemes
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