I'm working on a webpage where if you hover over an image, it'll desaturate. It works in Chrome and IE. However, I can't get the transition to work in FF and it doesn't desaturate at all in Opera.
Here's my code:
<!DOCTYPE html>
<head>
<style type="text/css">
img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.0\'/></filter></svg>#grayscale"); /* Firefox */
filter: gray; /* IE */
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(1); /* Webkit */}
img {
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
filter: none;
filter: grayscale(0);}
img.transition {
-moz-transition: all 0.5s ease-in-out; /* FF */
-o-transition: all 0.5s ease-in-out; /* Opera 10.5 */
-webkit-transition: all 0.5s ease-in-out; /* Webkit */
transition: all 0.5s ease-in-out;}
</style>
</head>
<html>
<body>
<img src="http://www.wallpapershd.biz/wallpapers/2012/12/Cardinal-Bird-1024x1280.jpg" width="500" class="transition" />
</body>
</html>
I've seen similar questions but I'm kind of a beginner, so the answers were a little abstract; you don't have to provide me with the code yourself, but point me to a somewhat detailed answer that I can understand. If anyone could help me out, that would be great.
Why wouldn't you use a simple color transition from red to grey?
Related
I understand this animation should work on SVGs as it does on HTML elements but obviously I am wrong!
How do I achieve this effect with CSS on an SVG? Fiddle here.
div {
background: blue;
width: 400px;
height: 100px;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes example {
0% {
filter: brightness(1);
filter: contrast(1);
-webkit-filter: brightness(1);
-webkit-filter: contrast(1);
}
50% {
filter: brightness(0.1);
filter: contrast(0.1);
-webkit-filter: brightness(0.1);
-webkit-filter: contrast(0.1);
}
100% {
filter: brightness(1);
filter: contrast(1);
-webkit-filter: brightness(1);
-webkit-filter: contrast(1);
}
}
Change the div from css to svg . It works for me.
Or if you want to see both the div and svg, just add div, svg { css code..}
Example: http://jsfiddle.net/4ebv7jzd/1/
I have logo in my website, it is grayscaled on hover i want it to be colored smoothly. it is working but not smoothly. i am using CSS transition.
This is my code
<img alt="TT ltd logo" src="./img/tt-logo.png" class="tt-logo" />
<style>
img.tt-logo {
filter: grayscale(1);
transition: grayscale 0.5s;
}
img.tt-logo:hover {
filter: grayscale(0);
}
</style>
Try do it this way:
img.tt-logo {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
transition: all 0.5s ease;
}
img.tt-logo:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
and every image has its own alt, you can use it without using img.class:
img[alt="TT ltd logo"] {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
transition: all 0.5s ease;
}
img[alt="TT ltd logo"]:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
in this case class is extra
Animating a filter takes a lot of computation and might hurt performance in some browsers.
You can get better performance by animating the opacity of a grayscale image to reveal a full-color image beneath it.
Here's an example.
With the current state of browsers, you could go for the example below, short and simple.
Modern browsers nowadays support the grayscale CSS attribute and if you're only transitioning one attribute, best reference one attribute instead of all attributes.
img {
grayscale: 1;
transition: filter .23s ease-in-out;
}
img:hover {
grayscale: 0;
}
Sources:
Animatable CSS properties
grayscale attribute
Timings on transitions
I'm creating a modal pop-up that alerts the user, and overlays on the page.
I'm trying to make it so that the background is blurred (thus content on page is obscured) but the modal-pop-up is clear.
Here is an example, the modal fades in after several seconds. I have applied filter: blur to the .modal-newsletter-wrap which is the wrapper that sits full across the page. My intention was that the text and the cat image on the page would be blurred, but they are still crisp: http://codepen.io/anon/pen/Ggzxdz
Also, despite having filter: blur(0); set on the inner div .modal-newsletter it's still inheriting the blur of the wrapper div.
.modal-newsletter-wrap {
background-color:rgba(243,243,232,0.5);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.modal-newsletter{
-webkit-filter: blur(0);
-moz-filter: blur(0);
-o-filter: blur(0);
-ms-filter: blur(0);
filter: blur(0);
}
.modal-newsletter is child of .modal-newsletter-wrap, so if you set blur filter on .modal-newsletter-wrap it will of-course apply to .modal-newsletter, no matter if you set blur(0) on child element .modal-newsletter.
you can set the blur on<p><p>, which now contains your page body(including cat and all stuff), so the blur is not carried to the modal popup.
See this codepen, you will need to set the style for blur on your content, using javascript when the modal opens.
Another solution would be to put an overlay on the page , which is not realted to (not parent of) .modal-newsletter-wrap, and add blur to it. Like this
wrap all the contents except the overlay in a common parent element (e.g a <main> element) then run a blur animation after 5 seconds
http://codepen.io/anon/pen/EarEzo
#-webkit-keyframes blur {
0% { -webkit-filter: blur(0px); }
100% { -webkit-filter: blur(5px); }
}
#-moz-keyframes blur {
0% { -moz-filter: blur(0px); }
100% { -moz-filter: blur(5px); }
}
#keyframes blur {
0% { filter: blur(0px); }
100% { filter: blur(5px); }
}
main {
-webkit-animation: blur 1s linear 5s 1 forwards;
-moz-animation: blur 1s linear 5s 1 forwards;
animation: blur 1s linear 5s 1 forwards;
}
In this example http://codepen.io/anon/pen/gbqeVV I've also activated the close action via CSS :target pseudoclass. If the overlay element is a sibling of the content wrapper then you could transform the “close” label into a link as in the example, then add this style
#close-layer:target {
display: none;
}
#close-layer:target ~ main {
-webkit-animation: none;
-moz-animation: none;
animation: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
filter: blur(0);
}
The same effect can be also achieved without setting an hash, e.g. using an hidden checkbox and the :checked pseudoclass: http://codepen.io/anon/pen/XJOqJV
#closeoverlay { display: none; }
#closeoverlay:checked ~ .modal-newsletter-wrap {
display: none;
}
#closeoverlay:checked ~ main {
-webkit-animation: none;
-moz-animation: none;
animation: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
filter: blur(0);
}
Another approach is just one line of css: backdrop-filter: blur(1rem);:
<div class="some-background">
<div style="backdrop-filter: blur(1rem);"></div>
</div>
I have a problem with CSS Style -webkit-filter: grayscale(0%) and filter:none don't work in IE 10 and Safari.
For Example i have Slider images but on the images is a grayscale Filter (i need this for the home site)
I implement this CSS Code:
.page-id-8 .slider-entry-image img{
min-width:220px !important;
width:220px !important;
-webkit-filter: none!important;
filter: url(""); /* Firefox 10+, Firefox on Android */
filter: none!important; /* IE6-9 */
-webkit-filter: grayscale(0%);
}
But the Slider Images are gray in IE 10 and Safari:
But i need this view:
URL LINK
I hope someone can help me.
use this for all browsers
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg); /* Firefox 4+ */
filter: gray; /* IE 6-9 */
refer http://labs.voronianski.com/css3-grayscale/
This is a cross browser solution using HTML5 and jquery
Code
Demo
I'm attempting to transition an image from a 50% grey scale filter to its filterless state on hover.
The transition doesn't work in firefox however. Is it possible to get the transition running in firefox using only css?
img {
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"); /* Firefox 3.5+ */
filter: gray alpha(opacity=50); /* IE6-9 */
-webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
transition: all .6s ease;
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
Because the standard filter syntax is a url it's not amenable to transitioning. Gecko would have to implement the shorthands part of the under construction Filter Effects specification for this to work.
In the meantime you could do this using SVG animation but not via CSS only.