(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;
}
Mä en muista kysyinkö jo tätä Instagram juttua, mutta kysyn varoiksi. Eli miten sellasen liikkuvan / kuvia vaihtavan Instagram jutun saa tohon sivupalkkiin?
VastaaPoistaToinen 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)
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
PoistaEn 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ä!
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ä ://///
VastaaPoistaMoi Tiia ja kiitos paljon :)! Autan mielelläni aina, jos vain osaan auttaa, joten aina saa kysyä :)
PoistaTummanharmaa 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!
Blogin hallinnoija on poistanut tämän kommentin.
VastaaPoistaMiten tän haalenemisefektin saisi vain yhteen kuvaan gadgeteissa? Oon niitä joissain blogeissa nähnyt.
VastaaPoistaMoi 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!
PoistaMoikka!
VastaaPoistaMielenkiintoinen 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