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

zdjęcia, photos, images

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



Reading Time: 3 minutes

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ż

Prosta animacja z użyciem CSS3 Zapewne każdy z was widział różne animacje na stronach internetowych. Obracające się czy wjeżdżające zdjęcia. Większość z tych animacji stworzona jest...
Mieszanie kolorów z selektorem mix-blend-mode Właściwość CSS mix-blend-mode określa sposób łączenia się ze sobą elementu nadrzędnego np. obrazka z tłem umieszczonym pod nim. Efekt końcowy jest pod...
Efekt karteczki z dziurką dla Tagów na blogu ̵... Jak pewnie już zauważyliście, albo i nie na moim blogu tagi umieszczone są na takich małych żółtych (symbolicznie) karteczkach z dziurką. Efekt ten je...
Ciekawe efekty na tekście z użyciem cienia –... Jedną z ciekawszych właściwości CSS jest Text-Shadow - czyli cień umieszczony pod tekstem. Jeszcze do niedawna (kilka lat temu) tego typu efekt uzyski...

Dodaj komentarz

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