Gray out image with CSS? - css

What's the best way (if any) to make an image appear "grayed out" with CSS (i.e., without loading a separate, grayed out version of the image)?
My context is that I have rows in a table that all have buttons in the right most cell and some rows need to look lighter than others. So I can make the font lighter easily of course but I'd also like to make the images lighter without having to manage two versions of each image.

Does it have to be gray? You could just set the opacity of the image lower (to dull it). Alternatively, you could create a <div> overlay and set that to be gray (change the alpha to get the effect).
html:
<div id="wrapper">
<img id="myImage" src="something.jpg" />
</div>
css:
#myImage {
opacity: 0.4;
filter: alpha(opacity=40); /* msie */
}
/* or */
#wrapper {
opacity: 0.4;
filter: alpha(opacity=40); /* msie */
background-color: #000;
}

Use the CSS3 filter property:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
The browser support is pretty decent, https://caniuse.com/css-filters.

Your here:
<img src="img.jpg" />
Css Gray:
img{
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 */
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}
Ungray:
a:hover img{
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");
filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none ; /* IE6-9 */
zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
-webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
I found it at: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao
Edit: IE10+ does not support DX filters as IE9 and earlier have done, nor does it support a prefixed version of the greyscale filter.
You can fix it, use one in two solutions below:
Set IE10+ to render using IE9 standards mode using the following meta element in the head: <meta http-equiv="X-UA-Compatible" content="IE=9">
Use an SVG overlay in IE10 to accomplish the greyscaling internet explorer 10 - howto apply grayscale filter?

If you don't mind using a bit of JavaScript, jQuery's fadeTo() works nicely in every browser I've tried.
jQuery(selector).fadeTo(speed, opacity);

Better to support all the browsers:
img.lessOpacity {
opacity: 0.4;
filter: alpha(opacity=40);
zoom: 1; /* needed to trigger "hasLayout" in IE if no width or height is set */
}

To gray out:
“to achromatize.”
filter: grayscale(100%);
#keyframes achromatization {
0% {}
25% {}
75% {filter: grayscale(100%);}
100% {filter: grayscale(100%);}
}
p {
font-size: 5em;
color: yellow;
animation: achromatization 2s ease-out infinite alternate;
}
p:first-of-type {
background-color: dodgerblue;
}
<p>
⚡ Bzzzt!
</p>
<p>
⚡ Bzzzt!
</p>
“to fill with gray.”
filter: contrast(0%);
#keyframes gray-filling {
0% {}
25% {}
50% {filter: contrast(0%);}
60% {filter: contrast(0%);}
70% {filter: contrast(0%) brightness(0%) invert(100%);}
80% {filter: contrast(0%) brightness(0%) invert(100%);}
90% {filter: contrast(0%) brightness(0%);}
100% {filter: contrast(0%) brightness(0%);}
}
p {
font-size: 5em;
color: yellow;
animation: gray-filling 5s ease-out infinite alternate;
}
p:first-of-type {
background-color: dodgerblue;
}
<p>
⚡ Bzzzt!
</p>
<p>
⚡ Bzzzt!
</p>
Helpful notes
What's the difference between CSS3 filter grayscale and saturate?
https://www.w3.org/TR/filter-effects-1

Here's an example that let's you set the color of the background. If you don't want to use float, then you might need to set the width and height manually. But even that really depends on the surrounding CSS/HTML.
<style>
#color {
background-color: red;
float: left;
}#opacity {
opacity : 0.4;
filter: alpha(opacity=40);
}
</style>
<div id="color">
<div id="opacity">
<img src="image.jpg" />
</div>
</div>

You can use rgba() in css to define a color instead of rgb(). Like this:
style='background-color: rgba(128,128,128, 0.7);
Gives you the same color as rgb(128,128,128) but with a 70% opacity so the stuff behind only shows thru 30%. CSS3 but it's worked in most browsers since 2008. Sorry, no #rrggbb syntax that I know of. Play with the numbers - you can wash out with white, shadow out with gray, whatever you want to dilute with.
OK so you make a a rectangle in semi-transparent gray (or whatever color) and lay it on top of your image, maybe with position:absolute and a z-index higher than zero, and you put it just before your image and the default location for the rectangle will be the same upper-left corner of your image. Should work.

Considering filter:expression is a Microsoft extension to CSS, so it will only work in Internet Explorer. If you want to grey it out, I would recommend that you set it's opacity to 50% using a bit of javascript.
http://lyxus.net/mv would be a good place to start, because it discusses an opacity
script that works with Firefox, Safari, KHTML, Internet Explorer and CSS3 capable browsers.
You might also want to give it a grey border.

Related

Animate with ease full colour and zoom for image

I'm using Slick Slider to create a carousel of product images. I've set all slides to be grayscale then I've set the current slide to be slightly bigger and full colour, this part works.
I want to make it a bit smoother though. Instead of it jumping to full colour and being bigger, how can I ease this? It'd be nice if the colour goes from grey to full colour and the size gets bigger gradually. (And then work in the opposite direction when not the current slide)
Is that possible?
The class slick-current get's added to the slide as soon as it's the active one.
.category-gallery .slick-slide {
zoom:1;
-webkit-filter: grayscale(1); /* Old WebKit */
-webkit-filter: grayscale(100%); /* New WebKit */
filter: grayscale(100%); /* Current draft standard */
}
.category-gallery .slick-current {
zoom:1.3!important;
-webkit-filter: grayscale(0)!important; /* Old WebKit */
-webkit-filter: grayscale(0%)!important; /* New WebKit */
filter: grayscale(0%)!important; /* Current draft standard */
}
Use scale() rather than zoom. You can then use transition to animate the property changes.
I've used :hover here to simulate the class change:
.category-gallery .slick-slide {
transform: scale(1);
filter: grayscale(100%);
text-align: center;
transition: all 1s ease;
}
.category-gallery .slick-slide:hover {
transform: scale(1.3);
filter: grayscale(0%);
}
<div class='category-gallery'>
<div class="slick-slide">
<img src="http://placekitten.com/200/300">
</div>
</div>

css "opacity" property not supporting

<style>
.imgopacity{
opacity:0.2px;
}
</style>
In the above CSS code, the opacity property is not supported, how to obtaining the opacity property if anyhow i want to have one.
Opacity property is not measured in pixels . its a ratio from 0 to 1 to indicate the transparency of an element so your code should be :
<style>
.imgopacity
{
opacity:0.2;
}
</style>
Try:
.imgopacity {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
/* IE 5-7 */
filter: alpha(opacity=20);
/* Old Mozilla */
-moz-opacity: 0.2;
/* Safari 1.x */
-khtml-opacity: 0.2;
/* Compliant browsers */
opacity: 0.2;
}
.imgopacity {
opacity:0.2;
}
Simply remove that px from your CSS code. The opacity property does not take value in pixels. It can take a value from 0.0 to 1.0. The lower the value, the more transparent the image will be. For browsers like IE8 and earlier use filter:alpha(opacity=x), where x is a value from 0 to 100.

Grayscale image with CSS on Safari 5.x

I am trying to show some images on a page where they should be shown in grayscale, except on mouse hover when they smoothly transition into color. I've made it work nicely on IE, Chrome and Firefox, but it doesn't work on Safari 5.x. The problem is on Safari for Mac and Safari for Windows. Here is the code I have so far:
filter: url('desaturate.svg#greyscale');
filter: gray;
-webkit-filter: grayscale(1);
The first line loads an external .svg filter (I don't inline it with a url("data:... rule because I want to avoid a bug in old versions of Firefox).
The second line is for IE and seems to work just as well as filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);.
The last line about webkit is supposed to work on Safari 6 and above, as well as Chrome.
Is there any CSS rule to show the images with grayscale on Safari 5.x? Or, if that is not possible, can someone recommend a javascript solution, preferably one that will handle the animation to and from grayscale? I would like to avoid a server-side hack with grayscale images because that will mess up my HTML and then I'll have to do some nasty browser detection to serve HTML conditionally.
thanks
Edit:
As this has turned out to be a "notable question", please don't keep posting here more answers that only work on Safari 6 and above, or answers that include an .svg file in a data url. At the time when I wrote the OP, it was important for me to support some versions of Safari and Firefox that are today considered very dated, but nevertheless that was my original question.
I am well aware that for modern browsers grayscale filtering is easily accomplished with a few lines of CSS code, but the graphics designer was using Safari 5.x and the client was using Firefox 3.x at the time I did this project. The solution that worked for me was what Giona suggested, i.e. to use Modernizr to test for css-filtering, and if it's not supported to fall back to javascript.
If I was doing the same thing today, I'd be telling both to go update their browsers!
As you can see on caniuse.com , CSS3 filters are supported by very few browsers at the moment.
There are many JavaScript/jQuery fallback if you Google "javascript grayscale plugin".
Here are some:
Grayscale.js
jQuery GreyScale plugin
Hoverizr
Do it with canvas (tutorial)
But i've no experience with them, so i can't suggest you which one is the best.
I tried jQuery Black And White long time ago, and it gave me a lot of issues with relative/absolute positioned images, so maybe avoid it.
Including this Modernizr build into your pages, you can target browser not supporting filters via Javascript:
if(!Modernizr.css_filters){
/* javascript fallback here */
}
or CSS:
.no-css_filters .element {
/* css fallback here */
}
Oh, and don't forget dowebsitesneedtolookexactlythesameineverybrowser?
It's really simple, actually:
http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
http://jsfiddle.net/KDtAX/487/
I tried using the javascript fallback, but it really made no sense, and it was really slow on large images. This made a lot more sense. Note that there is a new syntax for grayscale, and I had to manually edit the resulting minified CSS from LESS.
Here's my mixin:
.filter (...) {
-webkit-filter: #arguments;
-moz-filter: #arguments;
-ms-filter: #arguments;
-o-filter: #arguments;
filter: #arguments;
}
And my class:
.grayscale-hover, .home-image {
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 see http://jsfiddle.net/KDtAX/487/*/
.filter(grayscale(1) blur(1px));
filter: gray; /* IE6-9 */
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
&:hover {
.filter(none);
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");
}
}
Works and tested in IE 6+, Firefox, Chrome.
This is something like that:
.grayscale {
filter: url(css/grayscale.svg#greyscale);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
You need to download the svg file either.
This one worked great for me:
img { float:left;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><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+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease;
z-index: 40 !important;
display:block;
}
img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><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");
-webkit-filter: grayscale(0%);}
The images looks really overexposed in Safari however (But they are in greyscale). And the transition isn't supported by Firefox.

How to Decrease Image Brightness in CSS

I want to decrease image brightness in CSS. I searched a lot but all I've got is about how to change the opacity, but that makes the image more bright.
can anyone help me ?
The feature you're looking for is filter. It is capable of doing a range of image effects, including brightness:
#myimage {
filter: brightness(50%);
}
You can find a helpful article about it here: http://www.html5rocks.com/en/tutorials/filters/understanding-css/
An another: http://davidwalsh.name/css-filters
And most importantly, the W3C specs: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
Note this is something that's only very recently coming into CSS as a feature. It is available, but a large number of browsers out there won't support it yet, and those that do support it will require a vendor prefix (ie -webkit-filter:, -moz-filter, etc).
It is also possible to do filter effects like this using SVG. SVG support for these effects is well established and widely supported (the CSS filter specs have been taken from the existing SVG specs)
Also note that this is not to be confused with the proprietary filter style available in old versions of IE (although I can predict a problem with the namespace clash when the new style drops its vendor prefix).
If none of that works for you, you could still use the existing opacity feature, but not the way you're thinking: simply create a new element with a solid dark colour, place it on top of your image, and fade it out using opacity. The effect will be of the image behind being darkened.
Finally you can check the browser support of filter here.
OP wants to decrease brightness, not increase it. Opacity makes the image look brighter, not darker.
You can do this by overlaying a black div over the image and setting the opacity of that div.
<style>
#container {
position: relative;
}
div.overlay {
opacity: .9;
background-color: black;
position: absolute;
left: 0; top: 0; height: 256px; width: 256px;
}
</style>
Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
<div class="overlay"></div>
<img src="http://i.imgur.com/G8eyr.png">
</div>
DEMO
In short, place black behind the image, and lower the opactiy. You can do this by wrapping the image within a div, and then lowering the opacity of the image.
For example:
<!DOCTYPE html>
<style>
.img-wrap {
background: black;
display: inline-block;
line-height: 0;
}
.img-wrap > img {
opacity: 0.8;
}
</style>
<div class="img-wrap">
<img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>
Here is a JSFiddle.
You could use:
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image.
See the following code for more details.
To make an image gray:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
To give a sepia look:
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
}
To adjust brightness:
img {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
}
To adjust contrast:
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
To Blur an image:
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
I found this today. It really helped me. http://www.propra.nl/playground/css_filters/
All you need is to add this to your css style.:
div {-webkit-filter: brightness(57%)}
If you have a background-image, you can do this : Set a rgba() gradient on the background-image.
.img_container {
float: left;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
border : 1px solid #fff;
}
.image_original {
background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.image_brighness {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.img_container p {
color: #fff;
font-size: 28px;
}
<div class="img_container image_original">
<p>normal</p>
</div>
<div class="img_container image_brighness ">
<p>less brightness</p>
</div>
It's obvious that all you need to do is this
<img src="https://rb.gy/njdqof" class="IMG">
CSS follows
/*if you go lower than 100% the lighting goes dark and above 100% your lighting is brighter*/
.IMG {
filter: brightness(20%);
}
You can use css filters, below and example for web-kit. please look at this example: http://jsfiddle.net/m9sjdbx6/4/
img { -webkit-filter: brightness(0.2);}
-webkit-filter: brightness(0.50);
I've got this cool solution:
https://jsfiddle.net/yLcd5z0h/
try this if you need to convert black image into white:
.classname{
filter: brightness(0) invert(1);
}
Like
.classname
{
opacity: 0.5;
}

CSS how to target background and make it transparent

I am using IE6 and the only occupicy thing i can thing that works is opacity: 0.5; filter: alpha(opacity = 50);
background-color:black;
opacity: 0.5;
filter: alpha(opacity = 50);
this works but it makes the text transparent as well how can I make only the background colour transparent
it's simple only you have do is to give
background: rgba(0,0,0,0.5)
& for IE use this filter
{background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */ zoom: 1;}
for more about color transparency in IE you have to read about hsla color:
http://greenevillage.net/csspages/hsla.aspx
You need to have a look at this trick here:
http://randaclay.com/tips-tools/how-to-make-your-backgrounds-transparent-using-css/

Resources