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.
Co znajdziesz w tym wpisie
- 1 Przykładowe efekty z najeżdżającym tekstem
- 1.1 3D THUMBNAIL HOVER EFFECTS
- 1.2 Directional hover effects
- 1.3 CSS3 – Responsive Image Grids with Transitional Effects when Hovered
- 1.4 CSS Image Hover Overlay Effect
- 1.5 slide-up img hover overlay with text
- 1.6 Image Hover Overlay
- 1.7 transitional hover overlay effects
- 1.8 Circle Hover Overlay Thing Animation…
- 1.9 simple hover overlay
- 1.10 Image gallery with hover
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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.