lauantai 4. huhtikuuta 2015

Kuviin mouseover-efektejä

Olenkin esitellyt teille jo mustavalkoisuusefektin tässä postauksessa. Nyt kerron teille kuitenkin muutaman kuvaefektin lisää, koska mouseover-efektit ovat olleet viime aikoina tosi kyseltyjä :)!

(Mikä ihmeen mouseover-efekti? Kun hiiren vie kuvan päälle, kuva muuttuu)

Nämä tämän postauksen koodit tuottavat kuvaefektin siis vain postausten kuviin. Ja kuten lähes aina, lisää koodit mallin suunnittelutyökalun CSS-boksiin (malli -> mukauta -> lisäasetukset -> lisää CSS)

HAALENEMISEFEKTI




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


BLURRAUSEFEKTI




.post-body img:hover {
filter: blur(5px);
-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{
filter: blur(0px);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}


SEEPIAEFEKTI




.post-body img:hover {
filter: sepia(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{
filter: sepia(0);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}


LISÄÄ VÄRIKYLLÄISYYTTÄ


.post-body img:hover {
filter: saturate(200%);
-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{
filter: saturate(100%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}


LISÄÄ KONTRASTIA



.post-body img:hover {
filter: contrast(130%);
-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{
filter: contrast(100%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}


8 kommenttia:

  1. Mä en muista kysyinkö jo tätä Instagram juttua, mutta kysyn varoiksi. Eli miten sellasen liikkuvan / kuvia vaihtavan Instagram jutun saa tohon sivupalkkiin?

    Toinen kysymys olis, että voitko tehdä jonkun postauksen jossa neuvotaan tota sivujen gadgettia voi muokata. Meinaan siis tätä: http://incompletesanna.blogspot.fi/ mun blogissa on noi etusivu, minä, kpop, jrock.. niin miten niiden ulkoasua voi muuttaa? Esimerkiksi tällaiseksi: http://www.lillivoitto.fi/2015/04/sairaalareissuun-paattynyt-maastoreissu.html ? En siis juuri tuollaista halua, mutta miten sitä vaan pystyy muokkaamaan... (ellet toki ole jo tehnyt aiheeseen liittyvää postausta)

    VastaaPoista
    Vastaukset
    1. Moi! Mä en ainakaan ole vastannut tällaisiin kysymyksiin, enkä muista sun nikkiä nähneeni. Hävisikö sitten kommenttitulvaan tai lähtikö ikinä tähän suuntaan, sillä ei kuitenkaan ole väliä, sillä nyt vastaan :D

      En ole vielä kummastakaan toteutellut postausta, joten yritän postata noista molemmista ohjeita tässä lähipäivinä (vielä kun lomaa on jäljellä :D). Kiitti noista postausideoista ja vielä havainnollistavista blogiesimerkeistä!

      Poista
  2. Moikka! Ihana blogi, ja kiva postaus :) <3 Voisitko auttaa mua yhdessä jutussa? Jos käyt katsomassa http://tia-smilinglife.blogspot.fi ja kelaat ihan alas, huomaat tummanharmaan inhottavan näkösen viivan :( Sama, jos laitan bannerin alapuolelle "Sivut" -gadgetin, niin se/ne tausta(t) on samanlainen. :( helppaa! Mua on kalvonnut toi SAMA ÄRSYTTÄVÄ ongelma jo yli puolivuotta, ja nyt tajusin kysyä sitä ://///

    VastaaPoista
    Vastaukset
    1. Moi Tiia ja kiitos paljon :)! Autan mielelläni aina, jos vain osaan auttaa, joten aina saa kysyä :)

      Tummanharmaa palkki pois:
      .footer-outer {
      background: none;
      }

      Välilehdet/sivut juttu toivomasilaiseksi tällä koodilla:







      .tabs-inner .widget ul {
      background: none;
      }
      .tabs-inner .widget li {
      border: none;
      }
      .tabs-inner .widget li a {
      display: inline-block;
      color: #000000;
      background: none;
      border:none;
      }

      .tabs-inner .widget li.selected a,
      .tabs-inner .widget li a:hover {
      background: none;
      }

      Toivottavasti olin avuksi!

      Poista
  3. Blogin hallinnoija on poistanut tämän kommentin.

    VastaaPoista
  4. Miten tän haalenemisefektin saisi vain yhteen kuvaan gadgeteissa? Oon niitä joissain blogeissa nähnyt.

    VastaaPoista
    Vastaukset
    1. Moi Jenna! Oleellista on tietää gadgetin HTML-nimi, se on ainoa keino saada efekti vain yhteen gadgetiin. Tällöin muutetaan valitsimeksi .nimi { Nimen löydät selaamalla lähdekoodiasi gadgetin otsikon avulla. Esimerkiksi jos gadgetin otsikko on blogissasi "Tunnisteet", menet blogisi lähdekoodiin ja etsit sieltä Ctrl + F -yhdistelmä Tunnisteet HTML-osiosta. Etsit "Tunnisteet" sanan yläpuolelta "class" kohdasta sanan widget ja valitset sen jälkeisen sanan, tässä on kyseessä widget Label. Sitten, jos kyseessä on kuva, laitat perään vain img (kuten postauksessa on post-body img). Toivottavasti sait tästä jotain selkoa!

      Poista
  5. Moikka!

    Mielenkiintoinen ongelma olis täällä: en saa kuvista haalenemisefektiä enää pois, vaikka olen poistanut kyseisen koodinpätkän CSS:stä. :D Osaatko auttaa?

    www.impulso.fi

    VastaaPoista

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