CSS - Arkusze stylów | Odcinek video

05. Efekty hover, transition, transform

MIROSŁAW ZELENT

Dziś zajmiemy się tak zwanymi hover effects, czyli efektami które pojawiają się po najechaniu na element kursorem. Bardzo często obserwujemy takie efekty na stronach internetowych i zapewne dlatego równie często o to pytacie. Stworzymy stronę internetową, która będzie zawierała 6 zdjęć pięknych miejsc na naszej planecie i każdy taki obraz wyposażymy w ciekawy efekt najechania na niego kursorem. Czasem zdjęcie pod wpływem interakcji poruszy się, czasami pojawi się dodatkowy tekst w nakładce, jak również będziemy w stanie uzyskać jego przybliżenie. Wykorzystamy między innymi: pseudoklasę hover, właściwości transition, transform i overflow oraz relatywne i absolutne pozycjonowanie.