Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
13 posts Page 2 of 2
Hi, personally I use a css class like that:

/* grayscale*/

img.grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
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 */
}

img.grayscale:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
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");
}

It works with every browser (not that I tried them all though), and it's simple and quick.
PaoloE, css solution can be used only if it's not critical to have greyscaled images, because about 30% of users (who use IE10-11, some Safari versions and some mobiles) will see them colored and without fading effects.

So the solution with two images is much more reliable for precision quality websites. Also, if there are a lot of images, they can be transformed in sprites (by using online services or programs) that will increase speed and stability even more.

So happy to work with Couch, it has so many useful features )
Hello!
Does anybody know how to make KCFinder behave correctly with greyscaled thumbnails (i.e. not displaying them)?
It doesn't show '111-160x160.jpg' but shows '111-160x160-grayscale.jpg'..

Thanks
13 posts Page 2 of 2