Zadaj pytanie lub umów termin:

napisz do nas

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

utworzone przez | Piękny biznes i blog, Uncategorized | 56 Komentarze

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ę?