如何在 WordPress 2024 中添加图像悬停效果？ [4 个最佳遵循步骤]

WordPress 中的悬停效果是什么？ 您的网站应该建立得独一无二。 当其他人都想法相同时，这很困难。 好消息是现代技术简化了网站设计。

向静态照片添加悬停效果就是一个例子。 关于在 WordPress 中对图片应用悬停效果的好处。 然后我们将向您展示如何将它们合并到您的网站上。 让我们开始吧！

如何在WordPress中添加图像悬停效果？ 4 个最佳步骤

了解悬停效果及其优点后，您可能会问如何实现它们。 幸运的是，我们已经为此提供了一份全面的指南：

悬停效果可以通过自定义代码添加。 但是，如果您不是经验丰富的编码员，这可能是一项耗时且有时甚至危险的工作。

然而，当使用插件时，事情变得明显不那么复杂。

免费 Beaver Builder WordPress 插件 简化了创建功能齐全且美观的 WordPress 网站的过程。

从模块化 CSS 到直观 拖放页面编辑器，一切的设计都考虑到了开发人员。

作为一个额外的好处，这个应用程序使任何人都可以轻松地将悬停效果应用于他们的图像。 对于任何需要额外交互元素的图片，使用 Beaver Builder 不会出错。

还建议您使用我们的 Beaver Builder 主题。 使用 WordPress 帖子模板快速创建各种帖子类型，包括页面。

这样，您就可以专注于创建引人入胜的功能，例如悬停效果，而不必担心开发布局。 另一方面，您可以将 Beaver Builder 与您选择的任何 WordPress 主题一起使用。

第1步：添加照片模块

开始之前，请激活 Beaver Builder 插件。 然后转到 WordPress 管理中的页面。 通过创建新页面或选择现有页面来激活编辑器。

然后单击右上角的加号。 您将添加一个照片模块。 拖放功能使您可以快速定位该模块。

第2步：激活照片模块

该模块允许您将照片发布到您的网站。 从您的图库中选择一张照片或输入 URL。 在媒体库中，裁剪图像。

您还可以塑造照片。 风景、全景、肖像或圆形图像都可以使用悬停效果。 您现在可以添加图像链接。 悬停效果可用于将流量引导至某些 URL。

第 3 步：添加自定义类

在图片模块设置之后，选择高级。 这是 HTML 元素.

向下滚动到班级。 在此输入效果的自定义类信息。 所以我们在类中添加了悬停取消模糊功能。 悬停效果允许您更改图像的颜色和运动。 Beaver Builder 中的起伏效果。 根据影响，需要特殊类别。

第四步：集成CSS效果

最后，将悬停 CSS 添加到您的网站。 我们的知识库有悬停CSS。 悬停效果之间的时间为 0.3 秒。 或者当你提交 CSS 时。 您可以加快或减慢过渡速度。

从左侧标题栏中选择全局设置。 现在将 CSS 代码添加到 CSS 标记中。

在每个 Beaver Builder 页面上，转到“工具”>“全局设置”并保存。 此外，非 Beaver Builder 内容受您的 CSS 规则的约束。

LayoutCSS&Jscript 中的单个页面。 保存您的 CSS 修改。 查看第一个悬停效果 将鼠标悬停在要测试的图像上。

将效果应用于一行或一列照片。

快速链接：

• 如何为您的 WordPress 网站创建调色板？
• 如何在 WordPress 中创建维护模式页面？
• 如何在 WordPress 中创建自定义 404 错误页面？
• 如何有效管理客户沟通？

结论：如何在WordPress中添加图像悬停效果？

个性化网站的方法有很多，但最简单的方法之一是在图像上使用悬停效果。 悬停效果是一种吸引网站访问者并使他们停留更长时间的有趣方式。

您有喜欢使用的首选悬停效果吗？ 快在下方评论区留言吧！