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

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


Directional hover effects

autor: jsnchn


CSS3 – Responsive Image Grids with Transitional Effects when Hovered

autor: Vo Tuan Trung


CSS Image Hover Overlay Effect

autor: Lena Stanley


slide-up img hover overlay with text

autor: Joshua James


Image Hover Overlay

autor: Marcos Paul


transitional hover overlay effects

autor: Angeal


Image Hover – Zoom Effect (Background-image)

autor: Boomer


Circle Hover Overlay Thing Animation…

autor: Joshua Ward


simple hover overlay

autor: abdelaziz majdi


Image gallery with hover

autor: Jakub


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

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

Recent Posts

Mity o marce osobistej, które warto znać

Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…

1 tydzień ago

Jakie zawody zastąpi AI? Czy mamy się czego bać?

Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…

2 tygodnie ago

Widmo Brockenu – co to jest?

Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…

2 miesiące ago

Relikwie: jak zdobywano, sprzedawano i podrabiano święte przedmioty

Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…

2 miesiące ago

Poznaj 6 powodów, dla których warto posiadać logo

Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…

2 miesiące ago

Dlaczego firmy mylą markę osobistą z firmową

Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…

2 miesiące ago