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

zdjęcia, photos, images

Kategoria wpisu Efekty i skrypty CSS, Kursy 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ż

Umieszczanie grafiki jako tła strony Standardowo każda strona internetowa posiada białe tło. To czy budując stronę zatrzymamy ten kolor lub czy go zmienimy zależy tylko od nas. Jako nowe...
Charakterystyka właściwości clip CSS Z pomocą własność CSS clip możemy określić, który fragment danego obiektu (np. grafiki) ma być widoczny lub też nie. W ten sposób możemy nadać obiekto...
Obramowanie na stronie – CSS Obramowanie (tzw. ramka) stanowi istotny element strony internetowej nie tylko w przypadku tabel, może ono np. stanowić bardzo ciekawą dekoracją (np. ...
Grafika w Bootstrap 4 Podobnie jak w Bootstrap 3 w Bootstrap 4 posiadamy już gotowe rozwiązania dla grafik umieszczonych na stronie. Nazewnictwo klas uległo jednak znaczące...