戏剧性的层次

巧妙地使用CSS和JS会复制图像并将它们叠加在一起。从那里，CSS 过滤器分别添加到每个图像。该技术产生了电影质量效果，否则难以实现。

 

快速而强大

这一系列悬停效果的优点在于它们提供即时满足感。但是这种速度并没有带走他们的效力。特别值得注意的是CSS3滤镜效果，因为它们在悬停时将棕褐色和灰度图像变为全彩色。

标题图形

这种倾斜的字幕容器，清晰的排版和快速动画的组合是强大的。它也让人联想到电视节目的开场演出。令人惊讶的是，绝大多数工作仅由CSS完成。

显示你的卡片

这是一个片段，让人想起有人展开一张纸牌供所有人看。但在这种情况下，它似乎是一个完美的悬停效果实现照片画廊。它不仅看起来很酷，而且还为用户提供了一些上下文。

改变现实

来吧，玩这个例子，看看你是否可以保持你的视力。当您将鼠标悬停在此建筑物的各个部分上时，会根据光标方向移动和滚动块。这一切都非常详细，令人困惑，令人惊叹。我们可以再做一次吗？

把它收集起来

想要更多令人兴奋的乐趣？这是Dimitra Vasilopoulou的另一个例子，他也创造了上面的真人移位者。在这里，照片似乎在网格布局中分开。快速徘徊将它们全部重新组合在一起。虽然它不是那么迷幻，但它同样令人印象深刻。

纯CSS的纯粹类

这个悬停效果的集合证明您不需要过分以便给人留下深刻的印象。这里有各种各样的样式选项，但每个样式都会在悬停时显示文本内容和过滤器。并且，没有使用任何一行JavaScript。

野外的钥匙（框架）

我们通过这种令人难以置信的CSS“快门”效果来达到戏剧与美的交汇点。将这些棕褐色的动物插图徘徊，创造出一种超平滑的过渡到全彩色。它是通过CSS过滤器，关键帧，伪元素和不透明度变化来完成的。

更大的图片

照片画廊如此广泛，但你看不到许多真正独特的画廊。这是一个惊人的例外。将鼠标悬停在网格中的缩略图图像上，全尺寸版本将接管整个容器。但那只是故事的一半。真正的酷因素来自图像“分裂”本身并在加载时重新组合在一起。

拆分揭示

在这里，我们有一种有趣的技术来揭示图像背后的文字。此代码段显示了将图像“拆分”为条带的各种方法，从而为秘密消息扫清了道路。由于它有点复杂，它可能不是您想要在页面上重复使用的东西。但是，通过正确的实施，您将为您的项目添加创意。

我们有戏剧

为您的网站添加戏剧性的悬停效果是吸引用户注意力的好方法。上面的例子显示我们可以在不过分的情况下达到预期的效果。你至少不需要一些响亮而讨厌的东西。相反，它完全是关于平滑过渡和引人注目的特效。

让这些例子激励你。然后，尝试将一些戏剧添加到您自己的图像中的方法。