0

The effect looks great in Chrome but fails in IE and FF. Please view this link in multiple browsers:

http://thebc.co/our-work

.portfolio-img{filter: url("data:image/svg+xml;utf8,#grayscale");/* Firefox 10+ /filter: gray;/ IE6-9 /-webkit-filter:grayscale(100%);/ Chrome 19+ & Safari 6+ /-webkit-transition: all .6s ease;/ Fade to color for Chrome and Safari /-webkit-backface-visibility: hidden; / Fix for transition flickering */-moz-box-shadow:0 0 2px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 2px rgba(0,0,0,0.2);box-shadow:0 0 2px rgba(0,0,0,0.2)}

.portfolio-img:hover{filter:none;-webkit-filter:grayscale(0%);-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);box-shadow:0 0 4px rgba(0,0,0,0.4);-o-transition:.8s;-ms-transition:.8s;-moz-transition:.8s;-webkit-transition:.8s;transition:.8s}

Matt
  • 1,735
  • 1
  • 12
  • 12
  • He's referring to the "hover" effect ... when you hover over a gray-scale image, it gradually starts to gain color. – Aziz Nov 09 '12 at 03:45
  • Thanks guys, and thanks for the chart NullPointer. Much appreciated. I really want to use this gray to color hover and I just can't find a great solution. There are flaws with 100% I have found. Do one of you know of a solution that can work in all CURRENT browsers? – Matt Nov 09 '12 at 03:54
  • Also, why would FF not support the ease effect? – Matt Nov 09 '12 at 03:55
  • @Matt the solution [Convert an image to grayscale in HTML/CSS](http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css) – NullPoiиteя Nov 09 '12 at 04:05

1 Answers1

1

its because the IE and up to Firefox version 16 does not supports filters

from the source http://caniuse.com/css-filters

NullPoiиteя
  • 56,591
  • 22
  • 125
  • 143
  • Thanks for the answer. When I view this effect in the latest FF, the shadow effect eases but the actual photo does not. What are your thoughts on that? Could it just not support the ease? – Matt Nov 09 '12 at 04:06
  • @Matt check the link ,,,:-) i have commented question --) will get you solution – NullPoiиteя Nov 09 '12 at 04:07
  • @Matt or direct demo http://dl.dropbox.com/u/11137205/grayscale.html works fine in firefox and ie checked ...rather by me now – NullPoiиteя Nov 09 '12 at 04:08
  • Thank you for the solid info! – Matt Nov 09 '12 at 04:22
  • had another issue but I forgot to post. To separate out the issue for the sake of SO users I started another question. DO you mind viewing? If so, thanks! http://stackoverflow.com/questions/13304218/grayscale-hover-effect-slow-in-ff-fast-in-chrome-ie-and-others – Matt Nov 09 '12 at 07:57
  • I wanted to work on this before changing over the grayscale hover effect. – Matt Nov 09 '12 at 07:58