perjantai 3. huhtikuuta 2015

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;
}

14 kommenttia:

  1. Minä olen monessa blogissa nähnyt Firefoksillakin muuttuvan hitaammin, mutta kiitos paljon tästä :) Sun blogista on ollut toosi paljon apua oman blogin kanssa, jonka kuitenkin poistin hetkis sitten, koska inspiraatio katosi.

    VastaaPoista
    Vastaukset
    1. Okei, kai sellainenkin sitten on! Mulla vaan ei toiminut monikaan grayscale-hidasfeidaantuminen -koodi, mikä kyllä IE:llä näkyi (tosin jo jonkin aikaa sitten) - aloin jo vähän epäilemään :D Mutta hei, kiitos paljon! Ihana saada positiivista palautetta <3 Saa muuten linkittää blogeja, joissa näkyy toi hidas feidaantuminen mustavalkoiseksi firefoxillakin - voisin yrittää kaivella lähdekoodista vähän apua, jospa sitten toimisi!

      Poista
    2. http://perfect-pony.blogspot.fi/
      Ainaki:)

      Poista
    3. Kiitos, nyt löyty just se mitä halusin :D käsittämätöntä, mulla oli kyllä melkein tismalleen samat koodit kuin tuossa toimivassa versiossa. Mutta ihanaa, nyt toimii! Lisäänkin efetin tohon postaukseen :) Kiitti paljon blogin linkkauksesta !!

      Poista
    4. Anteeksi kun vaivaan vielä tästä asiasta, mutta onko tuo mahdollinen sillä tavalla, että myös banneri ja sivupalkin kuvat muuttuvat hitaasti, koska tuo hidastuskoodi ei muuta niitä?

      Poista
    5. Ei mitään :) Joo, on mahdollista! Poistat vaan tuon hidastuskoodin ekan ja tokan osan alusta kohdan .post-body :)

      Poista
  2. Hei tästä tuli mieleen, tiedätkö miten kuvasta saisi näkyviin alkuperäisen version samalla idealla? Eli ensin näkyisi käsitelty kuva, mutta kun hiiren vie kuvan päälle niin tulisi näkyviin muokkaamaton kuva. Ja siis vain yhteen postaukseen haluaisin näin. En oikein löytänyt googlettamalla mitään... :/

    VastaaPoista
    Vastaukset
    1. Mmm... Musta tuntuu, ettei sellaista koodia välttämättä ole - netti tuskin tietää, millainen muokkaamasi kuva on ollut alunperin. Siksi suosittelenkin kyseiseen postaukseen mouseover rollover -kuvaa (kuva vaihtuu alkuperäiseksi, kun hiiren vie päälle). Voisin opastaa sua lähettämällä sulle s-postia, sillä homma on aika hankala selittää täällä boksissa (etenkään, kun bloggerin kommentointiboksi ei hyväksy HTML/JavaScript-muotoista tekstiä!). Joten jos sulla on aikaa ja innostusta, laita ihmeessä postia mun sähkikseen! Hommaan nimittäin on olemassa ratkaisu.
      Tässä mun meili: ilonahuotari@gmail.com

      Poista
  3. Heips!

    Mahtasitkohan tietää mousover-koodia, jolla postausten kuvat hälvenesivät pois näkyvistä mutta ei aivan ihan kuitenkaan. Että jäljelle jäisi tosi hailakka kuva. Oon löytäny sellasen koodin, jolla kuva pikkuhiljaa hälvenee kokonaan pois, mutta olisi kivempi jos kuvaa jäisi vähän jälelle. En tiedä ymmärsitkö tätä selostusta mutta kysympähän kuitenkin :--D

    Ja tää sun blogi on tosi ihana ja siitä on ollut paljon hyötyä! :)

    VastaaPoista
    Vastaukset
    1. Mooi! Kiitti paljon - kiva kuulla, että tästä on ollut sullekin hyötyä! Psst. kysyä saa aina, vaikken selostusta ymmärtäisikään :D

      Joo, tässä sulle kyseisenlainen (toivottavasti :D) mouseover-koodi CSS:ään:

      .post-body img:hover {
      opacity:0.2;
      -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{
      opacity:1;
      -webkit-transition: all 1s ease-out;
      -moz-transition: all 1s ease-out;
      -o-transition: all 1s ease-out;
      transition: all 1s ease-out;
      }

      Poista
    2. Hei, jes kiitti! Just tätä tarkoitinkin :)

      Poista
  4. Moikka! Lähes aina olen selvinnyt tän blogin avulla kaikista mieltä askarruttavista ulkoasu ongelmista. Aina täältä löytyy kaikkeen vastaus ja keino miten tehdä mitäkin :D Nyt kuitenkin meni tumpelolla peukalo suuhun, kun yritin keksiä, että miten tuon hover efektin saa vain sivupalkissa olevaan kuvaan/kuviin? Sain sen hitaan toimimaan postausten kuviin, mutten ainoastaan sivupalkkiin.

    VastaaPoista
    Vastaukset
    1. Moi Anni! Kiva kuulla, että sullekin on ollut tästä mun apublogista apua! Kyseisessä efektissä pitää vaihtaa valitsinta. Tässä sulle valmis koodi kuvailemaasi efektiin:

      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;
      }

      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;
      }

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

      Kokeiles josko tuo toimisi! Mulla ei testissä ilmennyt ongelmia, mutta sulla voi ton koodin kanssa ilmetä. Mikäli niitä ilmenee, ota yhteyttä!

      Poista

MUISTA LINKATA BLOGISI !! -> näin ongelman ratkominen / auttaminen osaltani onnistuu parhaalla mahdollisella tavalla! :-)