Po lewej efekt przed najechaniem kursorem myszy, po prawej po.
.post img { /*obrazek bez najechania*/
border-radius: 10%; /*zaokrąglenie rogów*/
opacity: 0.6; /*przezroczystość*/
background: #353A63; /*tło*/
border: 5px double #D8791A; /*kolor, grubość i rodzaj ramki*/
box-shadow: 0px 0px 20px #000; /*cień*/
}
.post img:hover { /*obrazek po najechaniu*/
border-radius: 0px; /*zaokrąglenie rogów*/
opacity: 1; /*przezroczystość*/
background: #D8791A; /*tło*/
border: 4px solid #353A63; /*kolor, grubość i rodzaj ramki*/
box-shadow: 5px 15px 10px #353A63; /*cień*/
transition:all 1s; /*płynne przejście*/
-moz-transition:all 1s; /*płynne przejście*/
-webkit-transition:all 1s; /*płynne przejście*/
-o-transition:all 1s; /*płynne przejście*/
}
Pamiętajcie, aby nie przesadzać z efektami, ponieważ może to wyglądać kiczowato i nieestetycznie. Ja użyłam tyle efektów, żeby pokazać Wam ile jest opcji, jednak nie trzeba z wszystkich korzystać naraz ;).
Brak komentarzy:
Prześlij komentarz