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