10个CSS库，以获得更好的图像悬停效果

如今，借助CSS，有很多方法可以提供悬停效果，尤其是图像。

做到这一点的古老而又金色的方式是更改文本颜色并在其下划线。

让用户轻松清晰地知道网页的哪一部分是可单击的，这是UX设计的重要组成部分。

我们正在研究方向性幻灯片，不同速度的缩放，淡入和淡出，铰链效果，聚光灯显示，摆动，弹跳等等。

现在， 当悬停事件被触发时，开发人员可以添加过渡效果或动画 。

您也可以在源代码处获取代码。

在此汇编中，有250多种悬停效果可以激发您的灵感。

将鼠标悬停在图像上，然后点击显示代码 ，以获取每种效果HTML和CSS代码。

在此页面中，您将找到带有字幕的16个悬停图像效果的不错集合。

这些效果是使用纯CSS3过渡和transform构建的，并且没有JavaScript，以提高跨浏览器的兼容性。

这里有4个很酷的字幕动画，当它们悬停在图像上时会运行。

要使用这些效果，您将需要编写一些HTML标记并包含CSS文件。

有20个圆形悬停效果和15个方形悬停效果。

iHover是由CSS3驱动的悬浮效果的集合。

有216种效果的扩展版本，可以14欧元购买。

其中一些效果包括在多个方向上的淡入淡出，推动，滑动，铰链，显示，缩放，模糊，翻转，折叠和快门。

该库包含使用纯CSS制作的44种效果。

包含教程和源代码的两组效果总共有30种。

由Codrop制作的此图像悬停演示，在图像及其标题之间进行平滑过渡时会给您启发。

该库提供CSS，Sass和LESS。

效果包括2D过渡，背景过渡，边框，阴影和发光过渡等。

悬停CSS允许您将悬停效果添加到任何元素，例如按钮，链接或图像。

所有效果均由CSS3提供支持。

按钮，叠加层，详细信息，标题，图像和社交媒体按钮有100多种图像悬停动画。

转到教程部分，了解如何在项目中应用这些效果。

所有的过渡看起来都非常流畅。

此合集中有7种不同的效果。

您可以通过在figure标签之前添加CSS类来使用这些效果。

一组简单的悬停效果，例如缩放，滑动，旋转，灰度，模糊，不透明度和其他基本效果。

图像标题将根据您上一个光标的位置从四个方向之一打开。

这是一种超酷的悬停效果，它将检测您的鼠标的最后移动。

发生悬停事件时，图像的边框将变为动画。

这是一个受UNIQLO启发的边框悬停动画。

一种用于磁贴设计，该功能具有慢速缩放，幻灯片，弹出窗口，变暗的叠加等功能。

在Chrome，Opera和Safari上运行良好。

由SVG clip-path和CSS过渡支持的超棒X射线聚光灯图像悬停效果。

翻译自: https://www.hongkiat.com/blog/css-libraries-image-hover-effect/