Jak zmienić przezroczystość zdjęć po najechaniu na nie kursorem myszy?

Na jakimś blogu, niestety nie pamiętam już jakim, zobaczyłam całkiem ciekawy efekt znikających zdjęć. Po najechaniu kursorem myszy na obrazek w notce ów blakł, zmniejszała się jego przezroczystość. Spodobało mi się to na tyle, że postanowiłam poświęcić temu osobny tutorial.


Można to zrobić na dwa sposoby. Pierwszy jest taki, że wszystkie zdjęcia wyglądają normalnie, a po najechaniu na nie myszą blakną. Drugi polega na tym, że zdjęcia od samego początku są wyblakłe, a do normalnego stanu wracają po wskazaniu na nie myszą. Jeżeli nadal nie potraficie sobie tego wyobrazić, to możecie przetestować obie te opcje na obrazkach znajdujących się poniżej.


Żeby uzyskać taki efekt na swoim blogu wystarczy umieścić jeden z poniższych kodów CSS w swoim szablonie. Tutorial jak to zdobić znajdziecie tutaj: [KLIK!]
WAŻNE - kod będzie działać tylko na zdjęciach umieszczonych w notkach. Jeżeli chcecie, żeby wszystkie zdjęcia na blogu (także w stopce i na paskach bocznych) miały taką animację, usuńcie z poniższego kodu fragmenty .entry-content

Zdjęcie pojawiające się

.entry-content img 
{ 
   -webkit-transition: opacity 0.5s ease-in-out; 
   -moz-transition: opacity 0.5s ease-in-out; 
   -ms-transition: opacity 0.5s ease-in-out; 
   -o-transition: opacity 0.5s ease-in-out; 
   transition: opacity 0.5s ease-in-out; 

   opacity: 0.5; 
} 

.entry-content img:hover 
{ 
    opacity: 1; 
}

Zdjęcie znikające

.entry-content img 
{ 
   -webkit-transition: opacity 0.5s ease-in-out; 
   -moz-transition: opacity 0.5s ease-in-out; 
   -ms-transition: opacity 0.5s ease-in-out; 
   -o-transition: opacity 0.5s ease-in-out; 
   transition: opacity 0.5s ease-in-out; 

   opacity: 1; 
} 

.entry-content img:hover 
{ 
    opacity: 0.5; 
}

We fragmencie opacity: 0.5; można zmienić wartość 0.5 na inną. Ważne, by była ona z zakresu od zera do jednego włącznie. Im mniejsza liczba, tym słabiej widoczny będzie obrazek (jeżeli damy 0 będzie on niewidoczny). Ważne, aby przy zapisie liczby dziesiętnej użyć kropki, nie przecinka.