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
See the Pen 3D THUMBNAIL HOVER EFFECTS by chorn99 (@chorn99) on CodePen.0
Directional hover effects
autor: jsnchn
See the Pen
directional hover effects by jsnchn (@jsnchn)
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 Effect
autor: Lena Stanley
See the Pen
CSS Image Hover Overlay Effect by Lena Stanley (@lenasta92579651)
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
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ą.