Przykładowe zastosowanie efektu overlay (nakładki) na grafice

Kategoria wpisu Frontend, Inspiracje, Kursy Tagi: , , , on przez .



Dzisiaj pokaże wam kilka ciekawych efektów dzięki, którym będziecie mogli ożywić trochę wasze strony internetowe z pomocą miniaturek. Rozwiązania tego typu spotykane są często na ryżego typu blogach oraz niektórych stronach internetowych – gdzie zastępuje tradycyjne linkowanie do wpisów, prac w portfolio lub aktualności. Z pewnością dużo przyjemniej klikać w ładny obrazek z odnośnikiem do wpisu niż w sam tekst.

Wybrałam jedynie tylko kilka moim zdaniem użytecznych animacji z zastosowaniem overlay (nakładki, powłoki) nachodzącej na obraz po najechaniu kursorem myszy (hover).

3D THUMBNAIL HOVER EFFECTS

autor: chorn99

See the Pen 3D THUMBNAIL HOVER EFFECTS by chorn99 (@chorn99) on CodePen.0


Directional Hover

autor: Kelly Bleck

See the Pen Directional Hover by Kelly Bleck (@kblizeck) on CodePen.0


CSS3 – Responsive Image Grids with Transitional Effects when Hovered

autor: Vo Tuan Trung

See the Pen CSS3 – Responsive Image Grids with Transitional Effects when Hovered by Vo Tuan Trung (@trungk18) on CodePen.0


CSS image hover overlay

autor: Ali

See the Pen CSS image hover overlay by Ali (@AliAmaar) on CodePen.0


slide-up img hover overlay with text

autor: Joshua James

See the Pen slide-up img hover overlay with text by Joshua James (@joshuajames) on CodePen.0


Image Hover Overlay

autor: Marcos Paul

See the Pen Image Hover Overlay by Marcos Paulo (@hellomp) on CodePen.0


transitional hover overlay effects

autor: Angeal

See the Pen transitional hover overlay effects by Angeal (@angeal185) on CodePen.0


Image Hover – Zoom Effect (Background-image)

autor: Boomer

See the Pen Image Hover – Zoom Effect (Background-image) by Boomer (@CodeBoomer) on CodePen.0


Circle Hover Overlay Thing Animation…
autor: Joshua Ward

See the Pen Circle Hover Overlay Thing Animation… by Joshua Ward (@joshuaward) on CodePen.0


simple hover overlay

autor: abdelaziz majdi

See the Pen simple hover overlay by abdelaziz majdi (@abdelazizmajdi) on CodePen.0


Image gallery with hover

autor: Jakub

See the Pen Image gallery with hover by Jakub (@jakubtursky) on CodePen.0


Zapewne część metod pokazanych w powyższych inspiracjach zdarzyło wami się już spotkać.

dodatkowe tagi:
linkowanie do wpisu, posta
grafika jako link
efekt hover
obrazek jako link, efekty CSS, JS
tekst na obrazku
pojawiający się tekst po najechaniu kursorem myszy
nałożenie koloru na obraz

Przeczytaj również

Ciekawe biblioteki z animacjami, które odmienią tw... Dobrym i sprawdzonym sposobem na "ożywienie" strony internetowej jest zastosowanie na niej różnych animacji. Właściwie dobrane i umiejscowione zmienią...
Automatyczne odświeżanie strony Prowadząc portal internetowy lub często aktualizowaną stronę gdzie nowy artykuł może pojawić się w ciągu kilku minut chcielibyśmy na bieżąco pojawiały...
Akordeon – rozwijaki i zwijaki na stronie Z akordeonem możemy spotkać się na różnych stronach internetowych. Najczęściej w dziale FAQ - gdzie z jego pomocą możemy rozwinąć odpowiedz na nasze p...
Animowana karta w przestrzeni 3D – CSS Dzisiaj postaram się wam przedstawić ciekawy efekt, który znalazłam kilka tygodni temu w internecie - animowanej karty / kartki. Efekt jest dość cieka...