Efekty i zmiana wyglądu zdjęć we wpisie

poniedziałek, 7 września 2015

Dzisiaj nie będzie wielkiej instrukcji. Nie będzie trzeba kombinować, zmagać się z tym co nam przez przypadek nie wyszło. Dzisiaj będziemy pracować tylko w CSS, a Wasza praca będzie się ograniczać tylko do kopiuj - wklej. Nic w kodzie nie trzeba szukać. Wpis na pewno wielu osobom przypadnie do gustu, bo zauważyłam, że większość osób nie lubi bawić się w wyszukiwanie czegoś w kodzie, zmienianie kodu. Zawsze większą popularność mają tzw. gotowce, a ten wpis nie wątpliwie do takich gotowców należy.

Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS 

1. Wysunięcie zdjęcia po najechaniu na nie myszką.

.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); }

2. Zaokrąglone narożniki zdjęć we wpisie

.post img{
padding: 0px !important;
border-radius: 10px;
}

3. Obracające się zdjęcie po najechaniu na nie myszką

.post img{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.post img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

4. Ścięte boki zdjęć

.post img{
padding: 0px !important;
border-radius: 0 15% 0 15%;
}

5. Czarno-białe zdjęcie po najechaniu na nie myszką

.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%); }

6. Efekt zamglonego zdjęcia po najechaniu na nie myszką

.post img { opacity: 1;
transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;
}
.post img:hover {
opacity: 0.70;
transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;
}

Wszystkie zdjęcia użyte do zaprezentowania efektów są mojego autorstwa. Zostały wykonane aparatem FujiFilm FinePix S6500fd. 

Jeśli spodobał Ci się wpis, przekaż go dalej :)