戲劇性的層次

巧妙地使用CSS和JS會復制圖像并將它們疊加在一起。從那里，CSS 過濾器分別添加到每個圖像。該技術產生了電影質量效果，否則難以實現。

 

快速而強大

這一系列懸停效果的優點在于它們提供即時滿足感。但是這種速度并沒有帶走他們的效力。特別值得注意的是CSS3濾鏡效果，因為它們在懸停時將棕褐色和灰度圖像變為全彩色。

標題圖形

這種傾斜的字幕容器，清晰的排版和快速動畫的組合是強大的。它也讓人聯想到電視節目的開場演出。令人驚訝的是，絕大多數工作僅由CSS完成。

顯示你的卡片

這是一個片段，讓人想起有人展開一張紙牌供所有人看。但在這種情況下，它似乎是一個完美的懸停效果實現照片畫廊。它不僅看起來很酷，而且還為用戶提供了一些上下文。

改變現實

來吧，玩這個例子，看看你是否可以保持你的視力。當您將鼠標懸停在此建筑物的各個部分上時，會根據光標方向移動和滾動塊。這一切都非常詳細，令人困惑，令人驚嘆。我們可以再做一次嗎？

把它收集起來

想要更多令人興奮的樂趣？這是Dimitra Vasilopoulou的另一個例子，他也創造了上面的真人移位者。在這里，照片似乎在網格布局中分開。快速徘徊將它們全部重新組合在一起。雖然它不是那么迷幻，但它同樣令人印象深刻。

純CSS的純粹類

這個懸停效果的集合證明您不需要過分以便給人留下深刻的印象。這里有各種各樣的樣式選項，但每個樣式都會在懸停時顯示文本內容和過濾器。并且，沒有使用任何一行JavaScript。

野外的鑰匙（框架）

我們通過這種令人難以置信的CSS“快門”效果來達到戲劇與美的交匯點。將這些棕褐色的動物插圖徘徊，創造出一種超平滑的過渡到全彩色。它是通過CSS過濾器，關鍵幀，偽元素和不透明度變化來完成的。

更大的圖片

照片畫廊如此廣泛，但你看不到許多真正獨特的畫廊。這是一個驚人的例外。將鼠標懸停在網格中的縮略圖圖像上，全尺寸版本將接管整個容器。但那只是故事的一半。真正的酷因素來自圖像“分裂”本身并在加載時重新組合在一起。

拆分揭示

在這里，我們有一種有趣的技術來揭示圖像背后的文字。此代碼段顯示了將圖像“拆分”為條帶的各種方法，從而為秘密消息掃清了道路。由于它有點復雜，它可能不是您想要在頁面上重復使用的東西。但是，通過正確的實施，您將為您的項目添加創意。

我們有戲劇

為您的網站添加戲劇性的懸停效果是吸引用戶注意力的好方法。上面的例子顯示我們可以在不過分的情況下達到預期的效果。你至少不需要一些響亮而討厭的東西。相反，它完全是關于平滑過渡和引人注目的特效。

讓這些例子激勵你。然后，嘗試將一些戲劇添加到您自己的圖像中的方法。