用過很多圖片縣停效果，說實在話，很多都不好用。我大致說一下原因：

1、對基礎CSS影響比較大；

2、附加的插件太多；

3、還要引用有一些JS。

而CSS3的誕生，對我們前端開發來說，有了質的飛躍！下邊就講一下這個 ImageHover.css ，它實現這樣或才那樣的效果特別方便！

一：下載地址

二：演示地址

三：最簡單例子

主要看下邊的代碼！簡單的不能不能的，我這里就不講了！

圖片標題

圖片簡介：這是一個例子！

四：特效樣式

注：只要把 imghvr-fade 更改成下邊的樣式即可！

下邊是全部的免費樣式！一共44個免費的樣式！官方總共有216個樣式，不過得19刀！

1、fade 褪色 (1個)

樣式

說明

imghvr-fade

褪色

2、push 推 (4個)

樣式

說明

imghvr-push-up

向上推

imghvr-push-down

向下推

imghvr-push-left

向左推

imghvr-push-right

向右推

3、slide 滑動 (4個)

樣式

說明

imghvr-slide-up

向上滑動

imghvr-slide-down

向下滑動

imghvr-slide-left

向左滑動

imghvr-slide-right

向右滑動

4、reveal 揭開 (4個)

樣式

說明

imghvr-reveal-up

向上揭開

imghvr-reveal-down

向下揭開

imghvr-reveal-left

向左揭開

imghvr-reveal-right

向右揭開

5、hinge 合頁 (4個)

樣式

說明

imghvr-hinge-up

向上合頁

imghvr-hinge-down

向下合頁

imghvr-hinge-left

向左合頁

imghvr-hinge-right

向右合頁

6、flip 翻動 (4個)

樣式

說明

imghvr-flip-horiz

水平翻動

imghvr-flip-vert

垂直翻動

imghvr-flip-diag-1

左角翻動

imghvr-flip-diag-2

右角翻動

7、shutter 快門 (10個)

樣式

說明

imghvr-shutter-out-horiz

水平往外快門

imghvr-shutter-out-vert

垂直往外快門

imghvr-shutter-out-diag-1

右斜角快門

imghvr-shutter-out-diag-2

左斜角快門

imghvr-shutter-in-horiz

水平往里快門

imghvr-shutter-in-vert

垂直往里快門

imghvr-shutter-in-out-horiz

水平往里、往外快門

imghvr-shutter-in-out-vert

垂直往里、往外快門

imghvr-shutter-in-out-diag-1

左斜角往里、往外快門

imghvr-shutter-in-out-diag-2

右斜角往里、往外快門

8、fold 折疊 (4個)

樣式

說明

imghvr-fold-up

向上折疊

imghvr-fold-down

向下折疊

imghvr-fold-left

向左折疊

imghvr-fold-right

向右折疊

9、zoom 放大 (9個)

樣式

說明

imghvr-zoom-in

里向外放大

imghvr-zoom-out

先變小再放大

imghvr-zoom-out-up

向先上再放大

imghvr-zoom-out-down

先向下再放大

imghvr-zoom-out-left

先向左再放大

imghvr-zoom-out-right

先向右再放大

imghvr-zoom-out-flip-horiz

翻轉垂直放大

imghvr-zoom-out-flip-vert

翻轉水平放大

10、blur 模糊 (1個)

樣式

說明

imghvr-blur

模糊

總結

以上是生活随笔為你收集整理的html hover图片效果,CSS第9款：Imagehover.css 纯CSS打造的图片悬停效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。