203 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Israel
  • Referred between 500 and 999 users
  • Sold between 100 and 1 000 dollars
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?

4265 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Microlancer Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer 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.

1733 posts
  • Exclusive Author
  • Won a Competition
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Bought between 1 and 9 items
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
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 500 and 999 users
+1 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

203 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Israel
  • Referred between 500 and 999 users
  • Sold between 100 and 1 000 dollars
r0nka says

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

2317 posts
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Europe
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 100 and 199 users
+1 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)

203 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Israel
  • Referred between 500 and 999 users
  • Sold between 100 and 1 000 dollars
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
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Elite Author
  • Europe
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 100 and 199 users
+2 more
duotive says
2317 posts
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Europe
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 100 and 199 users
+1 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.

203 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Israel
  • Referred between 500 and 999 users
  • Sold between 100 and 1 000 dollars
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