overlay nakładka przykłady

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

Czas czytania: 2 minut

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