Efekt można zpbaczyć TUTAJ

Aby renderować element w skali szarości za pomocą CSS, wystarczy użyć filtru właściwości CSS: grayscale (number), któremu towarzyszy zwykły kod przedrostkowych odpowiedników:

#grayelement{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}

Wartość powinna wynosić od 0 do 100% lub alternatywnie od 0 do 1, aby określić stopień skali szarości. Teraz, w Firefoksie (od wersji FF 31), przy korzystaniu z filtrów CSS jest haczyk - musisz również zdefiniować znacznik filtra SVG na stronie, aby efekt mógł zostać zastosowany. W przypadku filtru w skali szarości filtr SVG wygląda następująco:

<svg version="1.1" 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>

Należy zwrócić uwagę na atrybut id wewnątrz znacznika filtra. Następnie wewnątrz swojego kodu CSS dodaj dodatkowy wiersz na czerwono do oryginalnego kodu CSS:

#grayelement{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: url(#grayscale); /* set URL to id of SVG grayscale filter */
filter: grayscale(100%);
}

Aby cofnąć filtr w skali szarości, ustaw filtr: Skala szarości (0), a dla FF najłatwiej ustawić filtr: brak (alternatywą jest zdefiniowanie kolejnego filtru skali szarości SVG o wartościach = 10000, 01000, 00100, 00010).

Oto KOD pliku css:

<style>

ul.gallery{
list-style: none;
margin: 0;
padding: 0;
}

ul.gallery li{
display: block;
width: 200px; /* width of gallery */
height: 50px; /* portion of each gallery image that's shown initially */
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

ul.gallery li img{
position: absolute;
width: 100%;
border: 10px solid #D8D2A2;
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
filter: url(#grayscale); 
filter: grayscale(1);
-webkit-transition: all .5s ease-in-out; /* CSS3 transition setting */
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

ul.gallery li:focus{ /* when a LI receives focus (clicked on) */
z-index: 100;
outline: none;
-webkit-transform: rotate(3deg); /* rotate enlarged LI by 3 degrees */
-moz-transform: rotate(3deg);
transform: rotate(3deg); 
pointer-events: none; /* disable pointer events on enlarged LI so thumbnail(s) beneath it can receive those events */
}

ul.gallery li:nth-of-type(even):focus{ /* even LIs that received focus */
-webkit-transform: rotate(-1deg); /* rotate enlarged LI by -1 degrees instead */
-moz-transform: rotate(-1deg);
transform: rotate(-1deg);
}

ul.gallery li:focus img{
-webkit-transform: scale(2) translateX(80%); /* enlarge focused image and move horizontally */
-moz-transform: scale(2) translateX(80%);
transform: scale(2) translateX(80%);
top: 10px; /* shift enlarged image downwards by 10px */
outline: none;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4); 
-webkit-filter: grayscale(0); /* nullify grayscale effect */
filter: none;
}

ul.gallery li:first-of-type:focus img{ /* first image within list of thumbnails that receives focus */
top: 80px; /* move image down by 80px so it's not obscured by top of window edge */
}

svg{
position: absolute;
visibility: hidden;
}

</style>

Oraz KOD do pliku HTML

<svg version="1.1" 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>
<ul class="gallery" title="Tab after clicking on a thumbnail to cycle though thumbnails">
<li tabindex="1"><img src="/media/coconut.jpg" /></li>
<li tabindex="2"><img src="/media/desert.jpg" /></li>
<li tabindex="3"><img src="/media/horses.jpg" /></li>
<li tabindex="4"><img src="/media/ocean.jpg" /></li>
<li tabindex="5"><img src="/media/mushroom.jpg" /></li>
<li tabindex="6"><img src="/media/angelinasmall.jpg" /></li>
</ul>

Autor scryptu Dynamic Drive