本文阿寶哥将給大家介紹十個 “酷炫屌" 的圖像懸停效果，希望阿寶哥精心錄制的十個 Gif 動畫能讓大家眼前一亮，當然更希望這些特效能給大家設計圖檔懸停效果帶來一些 ”靈感“。
感覺方向的懸停效果
示例說明：該示例會根據滑鼠移入的方向展示不同的動畫效果。
示例來源：Noel Delgado
線上位址：https://codepen.io/noeldelgado/pen/pGwFx
靜态效果圖
Gif 動态效果圖
疊加運動懸停效應
示例說明：當滑鼠懸停在圖檔上時，會産生 3D 的堆疊運動效果。
示例來源：https://tympanus.net/
線上位址：https://tympanus.net/Development/StackMotionHoverEffects/
靜态效果圖
Gif 動态效果圖
可互動的等距 3D 網格
示例說明：當滑鼠懸停在 3D 的網格圖檔上時，會産生 3D 的堆疊效果。
示例來源：https://tympanus.net
線上位址：https://tympanus.net/Development/IsometricGrids/
靜态效果圖
Gif 動态效果圖
3D 縮略圖懸停效果
示例說明：當滑鼠懸停在圖檔上時，會産生 3D 的折疊效果。
示例來源：https://tympanus.net/
線上位址：https://tympanus.net/Tutorials/3DHoverEffects/
靜态效果圖
Gif 動态效果圖
圖檔懸停介紹效果
示例說明：滑鼠懸停圖檔時顯示相應的文字介紹。
示例來源：LittleSnippets.net
線上位址：https://codepen.io/littlesnippets/pen/bpMmBO
靜态效果圖
Gif 動态效果圖
懸停圖檔滑動效果
示例說明：滑鼠懸停圖檔時，圖檔會有滑動效果。
示例來源：LittleSnippets.net
線上位址：https://codepen.io/littlesnippets/pen/dGVQvB
靜态效果圖
Gif 動态效果圖
懸停滑動顯示前景圖
示例說明：滑鼠懸停在背景圖檔上，滑動會顯示前景圖。
示例來源：Hervé
線上位址：https://codepen.io/herve/pen/GoEna
靜态效果圖
Gif 動态效果圖
放大鏡效果
示例說明：使用 CSS3 和 jQuery 實作放大鏡效果。
示例來源：Rohan Hapani
線上位址：https://codepen.io/desirecode/pen/vgwaoe
靜态效果圖
Gif 動态效果圖
懸停顯示 3D 菜單
示例說明：懸停引導按鈕時，顯示其他的功能菜單。
示例來源：Jouan Marcel
線上位址：https://codepen.io/jouanmarcel/pen/NLgVjm
靜态效果圖
Gif 動态效果圖
懸停圖庫切割合成大圖
示例說明：懸停引導按鈕時，顯示其他的功能菜單。
示例來源：Shaw
線上位址：https://codepen.io/shshaw/pen/RyOPzb
靜态效果圖
Gif 動态效果圖
在日常工作中，如果小夥伴們也想實作圖檔懸停特效，阿寶哥推薦一個 Github 上的一個可擴充的、輕量的 CSS 圖檔懸停動畫庫 —— imagehover.css 。該庫是一個制作精良的 CSS 庫，允許你輕松實作各種圖檔懸停效果，支援 40 個懸停效果，壓縮後僅有 19KB。
加入全棧修仙之路 交流群，阿裡、騰訊和京東大佬都在的群裡，備注 3。