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.

Jak automatycznie zaokrąglić rogi zdjęć w notce?

Dzisiaj startujemy z pierwszym, banalnym tutorialem, który wielu z was na pewno zaoszczędzi czas. Na wielu blogach widuję zdjęcia z zaokrąglonymi rogami - czasem autorzy chcą dopasować je do wyglądu szablonu, czasem to zwykłe widzimisię. Niestety, wiele z nich jest przerabianych w ten sposób z użyciem programów graficznych. Mam nadzieję, ze wad tej metody nie muszę nikomu tłumaczyć. Wiadomo, jest to praco- i czasochłonne, a także może przysporzyć nam problemów, gdy postanowimy zmienić szablon, lub gdy zwyczajnie... takie zdjęcia przestaną nam się podobać.
 
Najprostszym rozwiązaniem jest umieszczenie poniższego kodu CSS we własnym szablonie. Informację gdzie i jak to to zrobić, znajdziecie TUTAJ. Fragment ten zmieni rogi wszystkich zdjęć w notkach na zaokrąglone.

.post-body img 
{ 
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px; 
}

Wartość "20px" można dowolnie zmieniać. Oznacza ona rozmiar zaokrąglenia w pikselach. Jeżeli nie orientujecie się, jak to może wyglądać, to zerknijcie na cztery przykłady poniżej. Możecie na nich zobaczyć, jak wygląda zaokrąglenie rogów o wartości 20px, 40px, 60px i 100px. Jeżeli zdecydujecie się na inną wartość pamiętajcie, żeby zmienić ją we wszystkich trzech liniach kodu!