14. Zmieniający się obrazek w poście

Zamieszczam tu instrukcję na zmianę obrazka w poście po najechaniu na niego kursorem specjalnie dla SeAa48PL.


Potrzebujemy dwóch obrazków o takich samych wymiarach. Należy je zalinkować np.
obrazek1: http://funkyimg.com/i/2KBmA.png
obrazek2: http://funkyimg.com/i/2KBmB.png

Trzeba je dodać do posta za pomocą htmlu. Wystarczy nacisnąć przycisk HTML, który znajduje się przy Nowy post u góry po lewej stronie.

<img class="obrazek1" src="http://funkyimg.com/i/2KBmA.png" style="position: absolute;">
<img class="obrazek2" src="http://funkyimg.com/i/2KBmB.png">

Po wejściu w Nowy post, zdjęcia będą na siebie nałożone. Wygląda to następująco.

Teraz trzeba wejść w arkusz CSS i wkleić tam następujący kod:

.obrazek1 {
    opacity: 0;
    transition:all 1s;
    -o-transition:all 1s;
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
 }

.obrazek1:hover {
    opacity: 1 ;
}

.obrazek1 to zdjęcie, które ma się pojawić. opacity: 0 oznacza całkowitą przezroczystość, natomiast opacity: 1 brak przezroczystości. transition:all 1s sprawia, że pojawienie się nagłówka jest płynne. Wartość 1s można zmieniać na większą.

Takich obrazków w poście można dodać wiele. Trzeba jednak zawsze używać w htmlu
<img class="obrazek1" src="Link_do_zdjęcia1" style="position: absolute;">
<img class="obrazek2" src="Link_do_zdjęcia2">

Mam nadzieję, że instrukcja jest pomocna. W razie problemów bądź pytań piszcie śmiało.