Efekty po najechaniu kursorem na zdjęcie (zamglenie, powiększenie, B&W)

9 mar 2015

Ostatnio instalowałam u kilku blogerek szablony zewnętrzne. Wiele takich szablonów ma  efekty, które pojawiają się po najechaniu kursorem na zdjęcie. To sprawia, że blog staje się bardziej dynamiczny i jest taki "bardziej" :) Wiecie, że na szablonach bloggerowych tez możemy mieć takie bajery? Najlepsze w tym jest to, że nie będziecie musiały nawet przechodzić do edycji kodu HTML. Odpowiednie kody wystarczy wkleić do arkusza CSS dostępnego w zaawansowanych opcjach edycji szablonu.


Po zalogowaniu do bloggera przejdź do SZABLON>DOSTOSUJ>ZAAWANSOWANE i w arkuszu CSS wklej wybrany kod.

ZAMGLENIE

Efekt zamglenia powstaje poprzez zmianę przezroczystości zdjęcia. Im wartość 0.80 i 80 będą niższe tym zdjęcie będzie bardziej zamglone po najechaniu na nie kursorem.

.post img{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease
; -o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease; } 
.post img:hover { opacity:0.7;
filter:alpha(opacity=50); }


CZARNO-BIAŁE


Stosując ten efekt zdjęcia na blogu staną się czarno-białe po najechaniu na kursorem.

.post img
{ -webkit-transition:
all 1s ease; -moz-transition:
all 1s ease; -o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease; }  
.post img:hover { -webkit-filter:
grayscale(100%); }

POWIĘKSZENIE

Po najechaniu kursorem zdjęcie zostanie powiększone. Im bardziej zwiększymy wartość 1.1 (koniecznie we wszystkich 3 miejscach) tym zdjęcie będzie bardziej się powiększać (np. 1.2, 1.3...1.8) Nie zalecam jednak na blogu stosowania zbyt dużych wartości bo efekt będzie zbyt agresywny.
.post img{
-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;
}
.post img:hover {
-o-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

***
Przyda się?

44 komentarze:

  1. Ciekawa zmiana na blogu chociaż chyba wolałam ten blog w czerwieni :)

    OdpowiedzUsuń
  2. Jak zawsze bardzo fajne porady. Sama skusilam sie na szablon zewnetrzny, bo zadna ze mnie artystka i koncentruje sie teraz na tresci, a nie na wygladzie. Pozdrawiam serdecznie beata

    OdpowiedzUsuń
  3. Jestem w trakcie kombinowania i szukania nowego wyglądu...dla siebie chyba projektuje się najtrudniej:)

    OdpowiedzUsuń
  4. Wpis fantastyczny, ale zmiany u Ciebie ... jestem pod wrażeniem. Kolorystyka, czcionka - wszystko gra :))

    OdpowiedzUsuń
  5. Obawiam się, że to nie wersja ostateczna....dla siebie najtrudniej coś wybrać:P

    OdpowiedzUsuń
  6. Gadżet fajny. Muszę pomyśleć, czy u mnie mi się taki widzi ;)
    Twoje zmiany na blogu - podobają mi się bardzo. Ja za czerwienią nie przepadam, ten musztardowy bardziej mi się widzi. Baner prezentuje się dużo lepiej ;)

    OdpowiedzUsuń
  7. Uśmiecham się jak czytam jak rożnie odbierają mój ( z założenia) "złoty" - Był już sraczkowaty i żółty :)

    OdpowiedzUsuń
  8. wow te efekty są świetne, muszę któryś wykorzystać

    OdpowiedzUsuń
  9. Widzę, że u Ciebie przysłowie "szewc bez butów chodzi" się nie sprawdza! Nie wiem jak Ty to robisz,że znajdujesz na wszystko czas :-) Gażety na bloga świetne - jak zawsze :-)

    OdpowiedzUsuń
  10. Swietna porada ,czasem wystarczy tak niewiele aby blog "żył".może i ja coś zmienię w końcu idzie wiosna,,,tylko...ja taka niekumata

    OdpowiedzUsuń
  11. Jesteś genialna! Świetne są takie efekty! Dzięki ♥

    OdpowiedzUsuń
  12. strasznie irytujące są takie efekty przy czytaniu postów na blogach. chciałabym zobaczyc dokładnie co jest na zdjęciu, a przy takich efektach muszę pilnować, żeby kursor był poza zdjęciem. nie widzę żadnych plusów takich efektów niestety.

    OdpowiedzUsuń
  13. To niestety nie tak do końca biorąc pod uwagę jak długo się do tego zabierałam i że wciąż szukam czegoś dla siebie:)

    OdpowiedzUsuń
  14. Przy opcji powiększania można przyjrzeć się nawet bliżej:) A tak serio to rozumiem i dziękuję za ten głos.

    OdpowiedzUsuń
  15. To daleko nie jestem, musztarda to takie złoto przecież :D

    OdpowiedzUsuń
  16. Podzielam głos poprzedniczki - mnie te efekty denerwują, ale fajnie, że pokazałaś, jak to zrobić i może kiedyś dojrzeję do tego.
    Ale widzę, że ikonka Pin na zdjęciach się zmieniła - jest coraz bliżej mojego faworyta. Mam nadzieję, że będzie kurs o wykreowaniu własnego Pina :)

    OdpowiedzUsuń
  17. Raczej takiego kursu w najbliższym czasie nie będzie jednak nie jest to sprawa skomplikowana. Wystarczy stworzyć napis, rysunek bez tła...cokolwiek chcesz w pliku PNG. Można do tego użyć nawet strony picmonkey.com. Samo umieszczenie przycisku opisywałam tu: http://www.zyj-kochaj-tworz.pl/2014/07/zyj-kochaj-tworz-upieksza-blogi.html

    OdpowiedzUsuń
  18. Oczywiście, że się przyda. :)

    OdpowiedzUsuń
  19. dziękuję Ci ślicznie za kolejną wspaniałą instrukcję :))

    OdpowiedzUsuń
  20. Bardzo fajne i efektowne! Pięknie na blogu nowe logo oraz kolory cudnie!!!!

    OdpowiedzUsuń
  21. Bardzo pożyteczne informacje :) świetne porady tutaj serwujesz :)

    OdpowiedzUsuń
  22. Świetny post! Zaraz robię, tylko się jeszcze waham - zamglenie czy powiększenie:)
    Pisałam Ci jakiś czas temu, pod postem o zmianie adresu, o przeniesieniu domeny z nazwa.pl na ovh. Jednak rezygnuję, bo musiałabym najpierw zapłacić im...ponad stówę. W każdym bądź razie, dziękuję Ci za rady:)

    OdpowiedzUsuń
  23. Mnie kosztowało to 10 zł, ale to może zależy jaki był regulamin w momencie zakupu.

    OdpowiedzUsuń
  24. To ze mianą na b&w jest najlepsze!! Świetne porady.

    OdpowiedzUsuń
  25. blog by dozza9 marca 2015 21:15

    O łał! Ale super!
    Ale czary- mary dla nas wyczyniasz :D Dla mnie to czarna magia :) Ale spróbuję się pobawić!

    OdpowiedzUsuń
  26. z czarno białym coś ci nie wyszło

    OdpowiedzUsuń
  27. Bardzo się przyda.
    Wow! Twój blog wygląda po prostu...wow!

    OdpowiedzUsuń
  28. Niezwykle pomocne, jeżeli ktoś chce uświetnić swojego bloga...a to właśnie mnie czeka w najbliższym czasie

    OdpowiedzUsuń
  29. Zgadzam się :-) najtrudniej :-)

    OdpowiedzUsuń
  30. Co dokładnie nie wyszło. Nie działa jak trzeba czy dzieje się coś innego?

    OdpowiedzUsuń
  31. Agnieszka Semrau10 marca 2015 11:13

    Jak zawsze coś przydatnego. I bardzo mi się podobają zmiany u Ciebie! Moje ulubione kolory :)

    OdpowiedzUsuń
  32. Och, jak dobrze, że tu trafiłam. A ja zawsze zastanawiałam się jak to robią inni blogerzy. :) Dzięki, już skorzystałam z Twojej rady.

    OdpowiedzUsuń
  33. Pamiętam jak jeszcze nie dawno sama się z tym zmagałaś:)

    OdpowiedzUsuń
  34. I nadal nie jestem zadowolona i ciągle coś grzebię na blogu roboczym w kodach :-)

    OdpowiedzUsuń
  35. Dzięki wielkie! Jesteś niezastąpiona :D To dzięki Tobie mój blog wygląda już normalnie i nie straszy :D Robisz kawał dobrej roboty i nie przestawaj. Uściski :)

    OdpowiedzUsuń
  36. hej mam pytanie, w jakim programie dodajesz napisy do zdjęć głównych na blogu?

    OdpowiedzUsuń
  37. Zwykle w Photoshopie, czasami w Inkscape. Program nie ma większego znaczenia. "Tajemnica" tkwi w opcji, która pozwala na zwiększenie przestrzeni między literami.

    OdpowiedzUsuń
  38. Czy to samo da się robić przy postach?

    OdpowiedzUsuń
  39. Ta instrukcja dotyczy zdjęć w postach.

    OdpowiedzUsuń
  40. Mam na myśli, czy da się zrobić to podczas pisania danego posta. I aby ten efekt był tylko do np. 2 spośród wszystkich.

    OdpowiedzUsuń
  41. Aaaaa.....da się:) W trybie edycji posta musisz przejść w zakładkę HTML. Będziesz widziała wpis w formie kodu. Musisz w nim odnaleźć zdjęcia, które mają mieć dany efekt.

    Kod zdjęć wygląda mniej więcej tak




    Dane zdjęcie trzeba zamknąć divie, czyli przed kodem zdjęcia wklejasz coś takiego:


    a po kodzie:



    słowo zamglenie zmieniasz na inne dowolone.


    Z kodami z wpisu postępujesz tak jak to opisałam z tą różnicą, że występujące w nich słowo post zmieniasz na nazwę, którą nadałaś ( w moim przykładzie na słowo zamglenie)

    OdpowiedzUsuń

Zostaw po sobie ślad. Każdy komentarz napędza do działania i dodaje skrzydeł. Właśnie Twój głos chcę usłyszeć!