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

zdjęcia, photos, images

Kategoria wpisu Kurs 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ż

Niezwykłe efekty tekstowe z użyciem CSS3 Pojawienie się CSS3 było przełomowe w wielu aspektach budowy stron internetowych. Nie tylko ze względu na częściowe a niekiedy nawet całkowite zastąpi...
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...
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...
Efekt Parallax podczas przewijania strony Efekt parallax polega na tym, że fragment lub fragmenty strony przesuwają się z inną szybkością niż pozostałe elementy dając wrażenie trójwymiarowości...