图像悬停效果是一种交互式元素，可让您以时尚的方式显示有关图像的其他信息。有多种悬停效果可供选择，它们不会减慢网站速度或扰乱设计。

通常，动画会导致某种形式的减速，但这些CSS效果并非如此。

因此，它们非常适合每个网站的需求。

它们有多种用途。例如，如果网站专注于摄影，可以添加图像悬停效果来显示照片的拍摄地点、日期或其他内容。

另一个很好的用途是产品信息。可以添加产品的图像，并使用悬停效果来显示产品何时可以订购、价格或其他内容。

第1步：安装图像悬停效果

Image Hover Effects – Elementor Addon插件很棒。顾名思义，它是Elementor Website Builder的插件，它是wordpress最好的网站构建器之一。因此，您必须同时安装两者。

该插件提供40种不同的悬停效果，包括淡入淡出、缩放、模糊等。可以添加标题、描述、设置标题标签、添加图标、链接到其他页面（非常适合产品或附属公司）等。

它还带有一个新的小部件，如果您想在页脚或侧边栏区域查看效果，可以利用它。

让我们首先单击“插件”，然后选择左侧管理面板上的“添加新”选项。

在可用的搜索框中搜索图像悬停效果。这将拉出您可能会发现有用的其他wordpress插件。

向下滚动，直到找到Image Hover Effects – Elementor Addon插件，然后单击“立即安装”按钮并激活该插件以供使用。

如果您没有安装Elementor建站神器插件，将在每个页面的顶部看到一条通知，告诉您安装它。这是必需的。

第2步：添加图像悬停效果小部件

幸运的是，添加悬停效果非常简单。需要明确的是，您不能简单地将悬停效果添加到现有图像中。相反，需要在Elementor编辑器中使用适当的小部件重新插入图像。

因此，您可能需要进行一些媒体库挖掘才能找到较旧的图像，但应该不会太糟糕。这意味着如果您想在整个网站中添加此功能，则需要相当长的时间。

转到您网站上的任何现有文章或页面。您还可以创建一个新的进行测试。一旦进入它，单击“使用Elementor编辑”按钮。

这将打开Elementor编辑器。在左侧，搜索“图像悬停效果”，然后将小部件拖动到页面或文章中。

您现在可以开始自定义小部件了，所有设置都可以在左侧找到。

第3步：设置图像悬停效果

完成设置只需要一两分钟，而且任何人都可以轻松理解。

第一种选择是效果。正如我之前所说，有40种可供选择，它们出现在下拉框中。选择要使用的那个。

注意：可以通过选择它并将鼠标悬停在您添加到文章或页面的小部件上来查看效果。如果你有时间，我建议你把它们都测试一下。

下一个选项是添加实际图像。只需单击它并从媒体库中选择一张图像。在它下面，可以选择图像的大小。

接下来，可以添加标题和标题标签。标题是标题文本中显示的内容，而标题标签是标题类型（H2、H3、H4等）。

之后，可以找到描述。在这里，可以添加很多附加信息，但我个人建议保持简短和切中要害。输入描述信息。

接下来是图标设置。在这里，可以为标题添加图标。它只会出现在标题之前（标题的左侧）或之后（标题的右侧）。

注意：如果将鼠标悬停在图像上时没有看到该图标出现，那是因为最近的Elementor更新。要解决此问题，请单击Elementor >设置>高级并启用Load Font Awesome 4支持。

最后是选项的链接。这就是将图像转换为指向其他页面或网站的链接的方法。它非常适合销售页面或会员链接。

如果您不想添加链接，请随时将其留空。

这涵盖了所有设置，单击“保存”或“更新”按钮，可以在网站上查看它。

恭喜您在wordpress中使用Elementor添加图像悬停效果。