Drupal 7: grayscale image to colored at mouse-hover. image generated with ImageStyles - image

Question

I have a list of client logos (Views Block) at frontpage. Images are generated via ImageStyle (resize and desaturate). So the logos are grayscale, but I need them to be colored at mousehover. Any idea how to do that?
I googled if there is a way to make image grayscale with css, but cant find it. or I cant find a way to make 2 different image (one colored, one grayscale) in a ImageStyle.
Helps are much appreciated! Thanks a lot your time!

Answer 1

You can set up two ImageStyles, both with the same dimensions.
One is the regular, colour image, the other the filtered one. The settings should be the same (cropping etc.), except that one has the desaturation filter. You can call one setting 'logo-thumb-normal' and one 'logo-thumb-filtered'
You should now have two output images which are the same except for the filtering, and they should have the same file name, though they will be in different folders.
Set your content type Image field to use 'logo-thumb-filtered.'
So, when you upload an image within a content type, that should generate two files, one for each setting:
/sites/default/files/styles/logo-thumb-normal/public/field/image/image.jpg and
/sites/default/files/styles/logo-thumb-filtered/public/field/image/image.jpg
You can refer to these two images manually, as Spudley suggests, but even easier may be to use jQuery to swap the images out on hover (here's a simple example: http://jsfiddle.net/vSUkv/1/):
$('.image1').hover(
function () {
src = $(this).attr('src');
$(this).attr('src', src.replace('filtered', 'normal'));
},
function () {
$(this).attr('src', src.replace('normal', 'filtered'));
}
);
EDIT:
To include jQuery in Drupal 7:
To add the script above, you can:
Add a custom JavaScript file to your theme, if you haven't already, by adding the line scripts[] js/custom.js to your theme's info file.
Create the js folder inside your theme, and create the custom.js file inside that folder.
Add the following code to your custom.js file:
// We define a function that takes one parameter named $.
(function ($) {
// Store our function as a property of Drupal.behaviors
Drupal.behaviors.imageSwap = {
attach: function (context, settings) {
$('.hplogoclient a img').hover(
function () {
src = $(this).attr('src');
$(this).attr('src', src.replace('filtered', 'normal'));
},
function () {
$(this).attr('src', src.replace('normal', 'filtered'));
}
);
}
}
}(jQuery));
Clear the cache and check again. See http://drupal.org/node/171213 for details.

Answer 2

I think you're going to need two images for this; one for the greyscale version and one for the colour version. You can't easily do that kind of image manipulation on the browser at the moment. (in fact, it can be done if you really want to, using some of the more modern browser features, but it'd probably be a lot more work, and would not be compatible in all browsers, so I'd stick with the two image solution for now)
For the two-image solution, if you set your image as a background image, then it's fairly simple in CSS:
.myelement {
background-image:url(/path/to/greyscale.png);
}
.myelement:hover {
background-image:url(/path/to/fullcolour.png);
}
You could also do it using CSS 'Sprites', which basically means having both pictures in a single image file, but setting the element's size such that only the appropriate part of the image is visible; then in the :hover styles, adjust the offset so that the other part of the image is visible instead.
It's a bit more fiddly to set up CSS sprites than simply using two separate images, but it can be worth the effort. Find out more about how to do it and why here: http://css-tricks.com/158-css-sprites/

Answer 3

There is a very easy solution using only simple HTML and CSS:
HTML:
<div id="desaturate"> <a href="/thelink"> <a img src="/sites/default/files/images/yourfolders/image.png" alt="this image is">
CSS:
#desaturate img { opacity:0.4; padding-left: 20px; } #desaturate img:hover { opacity:1.0; }
Here is a sample and simple tutorial.

Answer 4

You can now do this in CSS, see http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html :
.myimage:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.myimage {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
This saves having to generate, store and load 2 images.