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

zdjęcia, photos, images

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



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

Przeczytaj również

Odstępy pomiędzy literami w słowie CSS letter-spac... Zadaniem właściwości CSS letter-spacing jest ustawianie odległości (odstępów) pomiędzy poszczególnymi literami słowa w tekście. Za jej pomocą możemy w...
Zmiana koloru zaznaczenia właściwość CSS ::selecti... Jak zapewne każdy zauważył podczas zaznaczania na stronie internetowej fragmentu tekstu tło pod nim zmienia on kolor np. na ciemno niebieski (w zależn...
Zmiana i rozjaśnienie obrazka po najechaniu kursor... Parę razy w swoim życiu szukałam skryptu dzięki któremu mogę uzyskać efekt rozjaśnienia lub zmiany wyglądu obrazka lub fotografii po najechaniu na nią...
Proste rozwijane poziome menu w CSS W tym tygodniu pokażę wam jak zbudować proste poziome rozwijane menu (ang. top dropdown) korzystając z CSS i HTML. Dla nie wtajemniczonych chodzi o ta...