Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Using Grayscal hover effect, not working properly in FF or IE

Using Grayscal hover effect, not working properly in FF or IE

Problem

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}

Problem courtesy of: Matt

Solution

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

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

Solution courtesy of: NullPoiиteя

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Using Grayscal hover effect, not working properly in FF or IE

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×