overlay nakładka przykłady
| |

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

przezAurelia Sypniewska
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.

Przykładowe efekty z najeżdżającym tekstem

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 effects

autor: jsnchn

See the Pen
directional hover effects by jsnchn (@jsnchn)
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 Effect

autor: Lena Stanley

See the Pen
CSS Image Hover Overlay Effect by Lena Stanley (@lenasta92579651)
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