0

I have been doing quite a bit of research into this and im very new at jquery so i would like to get an opinion from some pro's on the best way to approach this before i dedicate some time to solving it.

I basically have 6 images on a page that load as normal. When a user hovers over one of the images i want the other images to go greyscale but the one that is being hovered over to remain colour.

I have seen several methods on how to do things reasonably similar but not quite what i want, and there are two ways apparently - is it better to css grey scale them or create seperate images and swap them out? i dont want to find i try one way and a few hours later find that it wont work!

Thanks

putvande
  • 15,068
  • 3
  • 34
  • 50
loveforfire33
  • 1,090
  • 3
  • 25
  • 46
  • possible duplicate of [Convert an image to grayscale in HTML/CSS](http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css) – Marc Audet Aug 27 '13 at 18:22
  • It depends very much on now many images you may need to filter. If you have 6 images, that is easy enough, but a big photo site with 6,000, that is another story... – Marc Audet Aug 27 '13 at 18:23
  • these are 6 images each about 300x300. – loveforfire33 Aug 27 '13 at 18:24
  • In the case of a few images, I would just make gray scale versions and put the effort into creating a smooth hover/transition using jQuery. – Marc Audet Aug 27 '13 at 18:30

3 Answers3

1

Depends on the scale of the images, for icons doing two seperate images each one being an sprite image of all of them would be the best approach, but if you are dealing with large scale images it's better to use css to use less space.

Aboca
  • 575
  • 2
  • 9
0

I'm use sprite image to do this and change the position of another image to grey scale. I define 2 rows of images. Up for color and down for greyscale images. So when I hover the image, I change the another images position by changing y-position. But if you want to choose another method, You can use one pixel grey png box or css3 opacity and put it over the image to simulate greyscale.

Hamed Khosravi
  • 535
  • 7
  • 21
0

@loveforfire33 here I think this is what you are looking for: http://cube3x.com/adipoli-jquery-image-hover-plugin/

Jay
  • 41
  • 8