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ż

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...
Animowana ikona „Hamburger” menu Jak zapewne każdy z was zauważył, że na niektórych stronach internetowych (głównie mobilnych) menu pokazuje się dopiero po kliknięciu w ikonę (trzy li...
Animacja w CSS – Transitions, czyli efekty p... Witam w kolejnym moim wpisie poświęconym animacją na stronach internetowych. Jak każdy wie jest to temat dość ciekawy i można o nim jeszcze bardzo duż...
5 prostych efektów na obrazkach z wykorzystaniem h... Animacje aktywowane efektem typu hover (po najechaniu kursorem myszy) są zawsze ciekawym dodatkiem na stronie internetowej. Dzięki rozwiązaniom jakie ...