Tak jak wskazuje tytuł posta – pokażę Wam kod, dzięki któremu możecie zamieścić w karcie dwa zdjęcia zmieniające się po najechaniu. Widziałam autorów stosujących podobny zabieg na wielu blogach, ale większość korzysta z generatora www, z którego, w moim odczuciu, wychodzi kod pozbawiony estetyki. Osobiście wolę, gdy zdjęcie zmienia się stopniowo, jak zostało zademonstrowane w przykładzie, a później wolno wraca do pierwszego obrazka. Poniżej zamieszczam kod wraz z objaśnieniami, a jeśli chociaż kilka osób uzna ten post za pomocny, to obiecuję wrócić z kolejnymi ozdobnikami dla Waszych kart.
<center>
<style type="text/css"> .puff img { -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -ms-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; } .zdj1, .puff:hover .zdj2 { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .puff:hover .zdj1, .zdj2 { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } </style>
<div class="puff">
<img class="zdj1" src="LINK1" style="position: absolute;" width="SZEROKOŚĆ" /> <img class="zdj2" src="LINK2" height="WYSOKOŚĆ" width="SZEROKOŚĆ" /></div>
</center>
Osobiście uznaję ten post za bardzo pomocny :) Znudził mi się standardowy wygląd karty postaci i mam ochotę w niej trochę pokombinować, ale ze względu na słabą znajomość HTML'a stanowi to dla mnie problem. Stąd posty takie jak ten powyższy są dla mnie prawdziwym zbawieniem i nie mogę doczekać się ich większej ilości!
OdpowiedzUsuńNa prawdę dobre :3
OdpowiedzUsuńPostaram się to kiedyś wykorzystać w swoich kartach :)))
Ten post jest super! Kod natomiast daje świetne efekty :D
OdpowiedzUsuńMam tylko jedno pytanie. Czy ten kod działa również na gify?
Czekam na większą ilość takich postów ;)
Oczywiście, działa również w przypadku gifów. :)
UsuńDziękuję Wam za opinie, już szykuję kolejny post!
Bardzo przydatna instrukcja. :) Działa jak ta lala, więc jestem naprawdę wdzięczna. No i świetny efekt przy zmianie zdjęć!
OdpowiedzUsuńŚwietna sprawa! Wykorzystane :D
OdpowiedzUsuńBardzo przydatna instrukcja! :)
OdpowiedzUsuńCzy możecie mi podesłać wszystkiego kody? ;) Mój e-mail: redh00d@wp.pl
OdpowiedzUsuńMogłabym prosić o wysłanie kodu? Byłabym wdzięczna :)
OdpowiedzUsuńblanchardchloe24@gmail.com
Czy mogę prosić o ten kod na e-mail panienkazokienka92@gmail.com ?
OdpowiedzUsuńZ góry dziękuję :)
Świetne! Więcej poradników na takie "gadżety" do bloga.Czekam na kod zuziawisniewska3@wp.pl
OdpowiedzUsuńŚwietny kod! Na pewno wykorzystam go w moich kartach, dziękuję za wstawienie. c:
OdpowiedzUsuńSuper kod, skorzystałam :3
OdpowiedzUsuńWie ktoś może, czy da się zrobić, by zmieniały się trzy zdjęcia? (w sensie po najechaniu zmienia się drugie, jest z kilka sekund i zmienia się na trzecie)
OdpowiedzUsuńZ góry dzeki <3
Trzeba zmienić cyferki przy selektorach .zdj1, .zdj2 :)
Usuń