Hi I have a problem I haven't been able to solve. I want my thumbnails displayed as grayscale and then in color on hover. The original image is color. It works in Chrome and FF. It will not work in IE.
http://rubowarkitekter.dk/?projekt_type=undervisning
I've added a filter to my thumbnails as explained in the accepted answer in this thread: Image Greyscale with CSS & re-color on mouse-over?
#projekt-image img { width: 163.33px; height: 120px; 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 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ }
and for hover
#projekt-image img:hover { filter: none; -webkit-filter: grayscale(0%); }
This is my code
<div id="projekt-image"><a href="<?php echo add_query_arg( 'rubowtax', '1798', apply_filters('the_permalink', get_permalink())); ?>"><?php if( class_exists( 'kdMultipleFeaturedImages' ) ) { kd_mfi_the_featured_image( 'featured-image-2', 'rubow_projekt' );} ?></a> </div>
In IE8 and 9 the images are displayed in color and nothing happens on hover.
Please let me know if you have any idea of what I could be missing.