如今，借助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/