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.

11 sierpnia 2014

4 komentarze :

  1. Ooo, fajny myk ;) Dobrze znać taki kod :D

    OdpowiedzUsuń
  2. Ja co prawda u siebie tego nie zastosuję, bo mnie się nie podoba, ale wiem że wiele osób stosuje no i fajnie wiedzieć JAK to zrobić :D

    OdpowiedzUsuń
  3. Fajna rzecz :) Podobało mi się to ale nie wiedziałam jak zrobić xD Dzięki

    OdpowiedzUsuń

Dzięki za komentarze! Wszystkie czytam i staram się na nie odpowiadać.
Zanim zadasz pytanie sprawdź, czy odpowiedzi na nie nie ma w zakładce FAQ znajdującej się na górze strony.