5 prostych efektów na obrazkach z wykorzystaniem hover – CSS

zdjęcia, photos, images

Kategoria wpisu Kurs CSS Tagi: , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (3 głosów, średnia: 3,67 z 5)
Loading...

Animacje aktywowane efektem typu hover (po najechaniu kursorem myszy) są zawsze ciekawym dodatkiem na stronie internetowej. Dzięki rozwiązaniom jakie dało nam CSS3 stały się też o wiele bardziej popularniejsze i prostsze w użyciu. Niemniej zastosowanie takiej animacji wymaga również pewnej wiedzy.

W tym wpisie postaram się przedstawić 5 prostych rozwiązań (efektów na obrazkach), które wystarczy jedynie skopiować by móc zaimplementować / dodać je na swojej stronie internetowej. Poniżej umieszczę też link do opisanej wcześniej animacji powiększenia i pomniejszenia obrazka.

Na początek ustalimy sobie wymiary kontenerów obrazów na, których będziemy pracować.

Przesunięcie obrazka w poziomie – animacja

Poniższy efekt nie będzie wpływać bezpośrednio na wygląd obrazka a jedynie dokona jego przesunięcia (ruchu) odsłaniając niewidoczny fragment.


A tak prezentuje się całkowity kod:

HTML

CSS

W celu zmiany kierunku przesunięcia wystarczy zmienić wartość margin-left: -200px; na margin-left: 200px;

Przesunięcie obrazka w pionie

Kolejny efekt biędzie działał na podobnej zasadzie jak poprzedni z tą różnicą, że po najechaniu kursorem obrazek przesunie się z góry na dół.



Pochylenie obrazka

Dzięki temu efektowi będziemy mogli obrócić ilustrację wraz z ramką. W przykładzie pochylimy obrazek jedynie o 10 stopni.



Transformacja / zmiana wyglądu zdjęcia

Poniższy efekt będzie najbardziej skompilowanym z dotychczasowych – nie tylko obrócimy do o koła osi obraz, ale także dokonamy zamiany kwadratowej ramki w okrąg.



Zamiana w okrąg / Focus

Podobnie jak w poprzednim przykładzie zmienimy obraz w okrąg – jednak dokonamy tego w podobny sposób jak w starym aparacie fotograficznym. Czyli obraz zostanie umieszczony w czarnej grubej okrągłej ramce.


Polecane:

Efekt Zoom Hover po najechaniu kursorem na zdjęcie, obrazek

Źródło:
10 Easy Image Hover Effects You Can Copy and Paste
https://designshack.net/articles/css/joshuajohnson-2/

Dodatkowe tagi:
dynamiczna animacja, polegająca na ruchu obrazków, grafik
przekształcenie, zmiana kształtu przykładowej grafiki jako efekt hover
Bardzo proste effects efekty css na zdjęciach
ciekawe animacje z pomocą css3
Efekty uruchamiają się po najechaniu kursorem myszy myszki na obszar images

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *