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

overlay nakładka przykłady

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ż

Rosnący pasek postępu podczas przewijania strony Rosnący pasek postępu podczas przewijania strony internetowej to często mało widoczna animacja. Dzięki niej możemy zobaczyć, w którym miejscu witryny ...
Animacja ikon, obrazków na przykładzie dłoni Dziś postaram się pokazać jak w prosty sposób uzyskać efekt animowanej ikony (małego obrazka) na stronie internetowej. Na początek warto zapoznać s...
Ciekawe rozwiązania dla formularzy logowania i rej... W kolejnym w kolejnym wpisie poświęconym inspiracją przygotowałam dla was ciekawe rozwiązania dla formularzy logowania i rejestracji. Podobnie jak wcz...
Najefektywniejsze kolory na stronie – kolory... Kolory jakie wykorzystamy na naszej stronie internetowej mają olbrzymie zbaczanie na to, jak odwiedzający ją ludzie będą ją odbierać czy będą chcieli ...