I'm having troubles doing a transition from grayscale to colored, it works in chrome, but that is it.
Here is the HTML:
<div id="post" style="background-image:url('bg.png');background-repeat:no-repeat;">
<p><a href="/post.php?id=1">Title - Date</a></p>
</div>
Here is the CSS:
#post{
padding:0;
margin:0 auto;
margin-bottom:25px;
border:solid 1px #000;
height:150px;
width:750px;
display:block;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale");
filter: gray alpha(opacity=50);
-webkit-filter: grayscale(50%);
-webkit-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
transition: 0.3s all ease;
-webkit-backface-visibility: hidden;
}
#post:hover{
filter: none;
-webkit-filter: grayscale(0%);
}
Thanks for any help, it's appreciated.
The grayscale() function in CSS is an inbuilt function that is used to apply a filter to the image to set the grayscale of the image. Parameters: This function accepts a single parameter amount that holds the value of grayscale. The value of grayscale is set in terms of number and percentage.
grayscale()Converts an element's color to a shade of gray, for use by the filter property. A decimal value between 0 and 1 or percentage up to 100% controls the extent of the gray effect. This CSS property value is reflected in the following image: filter: grayscale(1); filter: grayscale(100%); /* same */
The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. Included in the CSS standard are several functions that achieve predefined effects.
Try setting #post:hover to this:
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");
You can look it up here. http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/
in case tutorial link will be dead works in: Safari 6.1.1, Firefox 26.0, Chrome 32.0.1700.77
.slides li img{
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 */
}
.slides li img: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");
}
As noted by Adam below: From Firefox 35 filter: grayscale(100%); should work.
From Firefox 35 filter: grayscale(100%);
should work.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With