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.

Uwaga! Niektóre instrukcje mogą nie działać. Staramy się na bieżąco je poprawiać. Prosimy o wyrozumiałość.

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!

Cytat

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!

Chcąc znaleźć pożądaną instrukcję, skieruj się do zakładki spis instrukcji, gdzie natrafisz na wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie. Uwaga! Niektóre instrukcje mogą nie działać. Staramy się na bieżąco je poprawiać. Prosimy o wyrozumiałość.

Blednący obrazek w poście

Kategoria: Autor:
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. Justyna17 listopada 2013 17:13

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

    OdpowiedzUsuń
    Odpowiedzi
    1. Weronika18 listopada 2013 19:23

      Na razie kombinuję nad kodem odwrotnym i może coś z tego będzie :)

      Usuń
    2. Unknown15 czerwca 2016 12:37

      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ń

Subskrybuj: Komentarze do posta (Atom)
© Agata | WS | x x.