Blogin kuvat mustavalkoisiksi!

Muutama lukija on kysynyt minulta apua blogin ulkoasun muokkaukseen. Tarkemmin sanottuna siihen, miten blogin kuvat muuttuvat hiljalleen mustavalkoisiksi, kun niiden päällä pitää hiirtä.

Eli kyseessä on koodi, jolla blogin kuvat saa muuttumaan hiljalleen mustavalkoisiksi pitämällä hiirtä niiden päällä. Tämä koodi kuitenkin toimii vain Google Chrome -selaimella.

Elikkä mene blogisi asetuksiin, paina Malli. Sen jälkeen paina Mukauta. Avautuu sivu jonka vasemmassa reunassa on valikko, paina Lisäasetukset. Viimeisenä Lisäasetusten valikossa on Lisää CSS. Kopioi alla oleva koodi sinne:

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

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

Paina Käytä blogissa, ja sen jälkeen Tarkastele blogia. Näin koodin pitäisi toimia!

Koodin pystyy myös tietääkseni muokkaamaan niin, että harmaista kuvista tulee värikkäitä hiiren ollessa päällä. Tätä en kyllä suosittele, sillä muilla selaimilla kuin chromella kuvasi näyttävät mustavalkoisilta, eikä niitä näin ollen näe ollenkaan värillisinä.

Mitä pidätte tälläisistä postauksista? Toimiko koodi teillä?