Efektiä kuvaan CSS:llä

Vie kursori kuvan päälle

Halusin kirjoittaa pikavinkin, koska kysymysten tulva koskien tätä yhtä ja ainoaa kuviin liittyvää muokkausta on ylittänyt ns. kipukynnyksen. Kyseessä on yksinkertainen CSS- koodi jossa määritellään kuvan "näkyvyys". Tälläinen fade efekti on useista valokuva- ja muotiblogeista tuttua kauraa ja luultavasti juuri siksi hyvin kysytty.

Onneksi tämänlaisen efektin tekeminen on hyvin helppoa ja annankin kaksi erilaista vaihtoehtoa ko. efektien tekemiseen.

Vaihtoehto 1: Kaikki blogissa julkaistavat kuvat

Kuten usein tilanne on, haluaa bloggaaja tälläisen kuva- efektin käsittävän kaikki bloginsa kuvat. Tämän saavuttamiseksi ei tarvita muuta kuin 2 riviä CSS-koodia.

Koodi tulee lisätä blogisi CSS-osaan

img { filter: alpha(opacity=80); opacity:.80; -webkit-transition: all .3s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .3s ease-out;}

img:hover { filter: alpha(opacity=100); opacity:1.0; -webkit-transition: all .9s ease-out; -moz-transition: all .6s ease-out; -o-transition: all .6s ease-out; transition: all .7s ease-out;}

Koodin ensimmäinen rivi määrittelee että kuvan näkyvyys on 80% alkuperäisestä ja toinen rivi taas sen että kuva tulee 100% näkyväksi kun hiiren kursori viedään kuvan päälle.

Vaihtoehto 2: yksittäiset kuvat

Melkein yhtä usein kun käyttäjä haluaa kaikkiin kuviinsa tälläisen efektin halutaan että vain tiettyihin kuviin voitaisiin asettaa tämä fade efekti. Tämä onnistuu lähes yhtä helposti. Ainoana erona on tietenkin se että kirjoittaessasi blogikirjoituksia sinun täytyy muistaa määritellä ne kuvat joihin haluat ko. efektin. Blogin CSS-osaan tulee ensin lisätä seuraavat koodin osat:

#kuvaefekti img {
filter: alpha(opacity=80);
opacity:.80;
-webkit-transition: all .3s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .3s ease-out;
}

#imghover img:hover {
filter: alpha(opacity=100);
opacity:1.0; -webkit-transition: all .9s ease-out;
-moz-transition: all .6s ease-out;
-o-transition: all .6s ease-out;
transition: all .7s ease-out;
}

Tämän jälkeen aina kun haluat lisätä kuvaan tämän efektin tulee sinun kirjoituksen yhteydessä siirtyä HTML puolelle ja lisätä kuvan ympärille seuraava koodi:

<div id="kuvaefekti"> <img border="0" src="kuvanosoite.com/kuva.jpg" /></div>

Loppusanat

Jos mieleesi tulee lisää kysymyksiä kuvista tai muusta bloggaamiseen liittyvästä ei muuta kuin härkää sarvista ja ota yhteyttä, joko käyttäen kysy bloggaamisesta lomaketta, kommenttina tai nyt myös Google+:aa! Ellet ole sattunut huomaamaan BlogiHaltuun.net on Google+ palvelussa ja sinne voi myös tästä päivästä lähtien jättää kysymyksiä koskien mitä tahansa bloggaamiseen liittyvää. 

Google+:n puolella tullaan myös julkaisemaan materiaalia jota et muualla tule näkemään. Tarkoituksena on myös esitellä kiinnostavia blogeja, eli nyt kannattaa hyökätä tuonne G+:aan.

BlogiHaltuun.net:in Google+ sivuihin pääset tutustumaan klikaamalla G+ logoa!