Cel bloga

Instrukcje dotyczące języka HTML czy kodów CSS, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Zadaj pytanie!

Wskazówka

Chcąc znaleźć pożądaną instrukcję skieruj się do zakładki spis instrukcji, gdzie znajdziesz wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie.

Archiwum

Statystyka

Blednący obrazek w poście

||
Projekt -->> projektant szablonów -->> zaawansowane -->> dodaj arkusz CSS. W białe pole wklejamy poniższy kod:

.post-body img {
opacity:1.0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.post-body img:hover {
opacity:0.6;
}

Poniżej dwa zdjęcia przedstawiające efekt przed i po najechaniu kursorem.


3 komentarze

  1. fajny efekt, ale lepszy byłby efekt odwrotny :-)

    OdpowiedzUsuń
    Odpowiedzi
    1. Na razie kombinuję nad kodem odwrotnym i może coś z tego będzie :)

      Usuń
    2. wystarczy zamienić selektory. Kod będzie wyglądał tak:

      .post-body img {
      opacity:0.6;
      }

      .post-body img:hover {
      opacity:1.0;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      }

      U mnie zadziałało! :)

      Usuń