CSS gray images

date 2013-03-18 19:02:36 date CSS Tricks» Tricks by Raul Molnar
This example shows how to make a grayscale div, no matter what its content is. For this, you need to use .svg (Scalable Vector Graphics) files located within the CSS style folder.

Attention! For Safari < 6 you can use this link

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<style>

.grayscale img {

filter: url(css/grayscale.svg#greyscale);

filter: gray;

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-o-filter: grayscale(100%);

} 

</style>

<div class="grayscale">

<p>Grayscale</p>

<img src="img/logo.png" alt="grayscale demo" />

</div>

<br />

<div>

<p>Normal image</p>

<img src="img/logo.png" alt="normal demo" />

</div>

codedemodownload
Below, is the sample .SVG file used in the demo. For production purposes, please use your own. For your own demo, simply download or copy/ paste the content below to a .svg file placed in the "img" folder.

1

2

3

4

5

<svg version="1.1">

<filter id="greyscale">

<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"></feColorMatrix>

</filter>

</svg>

codedownload

The following example is activating the grayscale only for mouse over

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<style>

.grayHover:hover img {

filter: url(css/grayscale.svg#greyscale);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: gray;

-webkit-filter: grayscale(1);

} 

</style>

<div class="grayHover">

<p>Grayscale on mouse over</p>

<img src="img/logo.png" alt="grayscale mouse over demo" />

</div>

codedemodownload

Newsletter

Sign up for inspiration, news and updates