Create grayscale filter for CSS image

Navigation
4

How can I apply a grayscale filter to an image with CSS?

    
asked by Daniel Hernández 22.01.2016 в 23:43
source

2 answers

0

Syntax 

.imagen {
  filter: <filter-function> [<filter-function>]* | none
}

An example applying a filter to an image would be:

HTML 

<img class="blur" src="imagen.jpg" />

CSS 

.blur {
  -webkit-filter: grayscale(20%)
  filter: grayscale(20%);
}
    
answered by 22.01.2016 / 23:47
source
1

Original response from StackOverflow in English
Webkit has support for CSS filters Compatibility cross-browser! 

img {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

/* Disable grayscale on hover */
img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
}
<img src="http://lorempixel.com/630/170/">
    
answered by 22.01.2016 в 23:50
Block Internet Explorer Comment a line in a file.log