Kuvien muuttuminen mustavalkoisiksi hiiren vietäessä päälle

Tarkoitan siis sitä, että tämän postauksen koodilla blogin kuvasta, jonka päälle vie hiiren, tulee mustavalkoinen. Eli kyseessä on siis eräänlainen mouseover-efekti.
Jotta asia selkiytyisi, vie hiiri alla olevan kuvan päälle:



Ja miten tämän efektin sitten saa omaan blogiin?

Malli -> Mukauta -> Lisäasetukset -> Lisää alla oleva koodi CSS:ään:

img:hover{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
}

 Tuo yllä oleva koodi tuo efektin kaikkiin blogin kuviin (banneri, sivupalkin kuvat, postausten kuvat). Jos haluat efektin vain postausten kuviin, toimi muuten samalla tavalla, mutta lisää äskeisen koodin tilalta tämä koodi:

.post-body img:hover{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
}

Entä sitten feidaantumisefektillä?

Lisää edellä mainittujen koodien tilalta nämä koodit, jotka luovat hitaan, ns. liukuvärjääntymismäisen, siistimmän mustavalkoisuuden hiiren vietäessä päälle. Olenpas hyvä selittämään asioita :D

.post-body img {
filter: grayscale(1%);
-webkit-filter: grayscale(1%);
-moz-filter: grayscale(1%);
filter: grayscale(1%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.post-body img:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}