如何在 WordPress 中添加图片悬停效果（5 种简单方法）

为网站添加悬停效果看似微不足道，却能提升网站的美观度和易用性。当访客将鼠标悬停在图片或按钮上并看到其略微变化时，便表明该元素是可交互的。. 

这种微妙的动态效果可以提升用户参与度，并有助于降低跳出率。悬停效果在电子商务中尤其有用。它可以让购物者更仔细地预览产品，鼓励他们进一步浏览并完成结账。

在 WordPress 中添加图片悬停效果的方法有很多，从简单的淡入淡出到引人注目的翻转动画，应有尽有。以下是一些入门方法！

如何在 WordPress 中添加图片悬停效果

本文总结了五种为网站添加悬停效果的简单方法。选择最适合你的方法吧！

方法一：使用插件

插件可以节省您大量的时间和精力，尤其是在您想在同一网站上使用多种悬停效果时。

例如，如果您有多个图片库，您可以为每个图片库应用不同的动画效果，例如博客缩略图的简单缩放效果或产品图片的翻转效果。

使用 Image Hover Effects Ultimate 之类的插件可以大大简化这个过程。这款插件免费提供给所有人，并为每个元素提供丰富的特效。要开始使用，只需按照以下教程进行安装即可： 

安装插件

• 打开您的WordPress管理后台。.
• 点击“插件”的“添加插件” 。

• 在搜索栏中输入“Image Hover Effects Ultimate”

• 选择第一个结果，然后点击“立即安装”开始下载。
• 安装完成后，点击“激活”按钮即可开始使用该插件。

使用图像悬停效果 WordPress 插件

• 插件安装完成后，您将在控制面板中“图像悬停

• 点击菜单打开插件设置。. 

• 选择你想要使用的任何效果。在本教程中，我们将尝试使用图像放大镜效果。
• 选择效果后，您将看到各种动画样式。.

找到喜欢的样式后，点击“创建样式” 。

• 此时会弹出一个窗口。在“名称”字段中输入标题，然后从布局中选择一个效果（第一、第二或第三）。然后单击“保存”继续。
• 您将被带到一个新页面，您可以在该页面自定义设置，例如高度、宽度和不透明度。不妨多尝试几次，看看哪种效果最佳。.

• 设置完成后，点击“编辑”自定义图像。

• 此时会弹出另一个窗口。您可以在这里自定义放大倍数。. 

• “选择图像”来替换图像。
• 设置完成后，点击“提交”保存悬停效果。

• 要将此效果应用到您的网站，请复制短代码并粘贴到您的文章或页面中。. 

• 现在，您已成功创建了简单的图像悬停效果，可以在网站的任何部分使用。. 

方法二：使用 CSS

此方法无需安装任何插件。通过使用自定义 CSS，您可以为主题添加各种悬停效果。.

我们先从简单的开始，比如添加悬停下划线效果。如果您想将此效果添加到您的主题中，请按照以下简单步骤操作：

• 导航至要添加悬停效果的帖子。.
• “+”号旁边的“封面”添加图片。

• “封面”中输入您的内容。我们将在此处添加标题和按钮。

• 根据个人喜好设置字体和样式。.
• 将页面保存为草稿。.
• 接下来，转到仪表盘中的“外观”

• 然后，点击“自定义” ，转到“附加 CSS” 。添加以下代码：

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• 点击“发布”保存代码。

• 现在返回你的帖子，选择要添加下划线效果的文本。.
• 打开模块侧边栏的“高级”在“附加 CSS 类”underline-hover 。

• 保存页面并预览以查看效果。. 

悬停效果种类繁多，总有一款适合你的风格。你可以自己学习编写 CSS 代码，也可以在 WordPress 社区寻找示例。资源应有尽有！

方法三：使用页面构建器（例如 Elementor）

像 Elementor 这样的页面构建器能让你尽情发挥创意来构建网站。它内置了悬停效果，无需任何编码即可轻松为网站增添活力。.

您还可以使用它在 WordPress 中创建图像悬停效果。在本节中，我们将尝试使用页面构建器内置的悬停效果。.

设置效果：

• 从管理后台打开Elementor
• 添加图片。.

• 选择图片，然后转到“样式”选项卡。
• 向下滚动并点击“悬停” 。

• 在“悬停动画”下拉菜单中，您可以找到各种现成的效果。

• 这里我们以“生长”效果为例。您可以自定义过渡持续时间、不透明度和其他设置，以匹配您网站的设计。

• 完成后，您无需预览即可立即看到效果。. 

方法四：使用 Flipbox 插件

如果您想使用快捷方式，可以安装 Flipbox 插件。Flipbox 效果是指当您将鼠标悬停在图像上时，图像会翻转以显示正面或背面的内容。.

这种效果非常适合用于摄影图像，您可以将照片显示在正面，将相机信息显示在背面。但它的可能性远不止于此。.

• 在 WordPress 控制面板中，点击“插件”菜单。然后，选择“添加插件” 。
• 在搜索栏中输入“Flipbox

• 点击“立即安装” ，然后激活插件。

• 要创建翻转框，请转到翻转框菜单并单击“创建新框” 。
• 选择你喜欢的动画效果。找到后，点击“创建样式” 。

• 此时会弹出一个窗口。选择所需的版式（第一版、第二版或第三版），然后输入标题。. 

• 点击“保存”继续。
• 接下来，您将进入自定义菜单，您可以在其中设置效果并添加您的内容。.

• 向下滚动找到“预览”选项卡。点击“编辑”即可自定义翻页盒正面和背面的内容。

• 完成后，点击“提交”保存。

• 要将此翻转框添加到您的页面，只需将生成的短代码复制并粘贴到您网站的任何部分即可。. 

• 好了，成品就是这样！ 

方法五：使用古腾堡区块

Gutenberg 是 WordPress 的默认区块编辑器，允许您直接在编辑器中添加悬停效果。.

虽然它可能不提供高级悬停效果，但您可以使用自定义 CSS 来增强动画效果。.

举个例子，我们来做一个简单的鼠标悬停淡入淡出效果。以下是分步教程：

• 导航至要添加悬停效果的帖子或页面。.
• 点击“ +”添加新模块，然后选择“封面”模块。

• “封面”内，添加一个“段落”模块。

• 请输入标题和简短描述。.
• 根据需要自定义字体大小、不透明度、对齐方式和颜色。.

• 然后选择封面模块，添加自定义 CSS 类。
• 打开右侧边栏的“高级”
• “附加 CSS 类”字段中输入fade-hover-effect 。

• 之后，将页面保存为草稿。.

• 转到“插件”菜单并选择您的代码片段插件。在本例中，我们使用的是WPCode 。
• 创建一个新的 CSS 代码片段，然后粘贴以下代码：

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• 保存代码片段并激活它。.
• 现在，预览您的页面，查看悬停淡入淡出效果。.

你可以通过将 fade-hover-effect 类添加到任何区块或图像来重复使用此效果。但如果你处理大量图像，建议使用WP Media Folder将媒体库整理到文件夹中。这样可以更轻松地查找和重复使用相关内容。

使用过多特效会影响性能吗？

是的，在网站上使用过多的悬停效果可能会影响性能，尤其是在没有进行适当优化的情况下。这是因为某些悬停效果需要额外的 CSS 代码。网站 CSS 代码量增加会导致页面加载速度变慢。.

最好只使用必要的悬停效果来提升用户体验，而不要使网站过载。.

包起来

学习如何在 WordPress 中添加图像悬停效果，可以通过增强用户互动和保持用户参与度来提升网站效果。.

无论是通过插件、自定义 CSS 还是页面构建器，添加悬停效果的方式多种多样，您可以自由选择最适合自己的方法。尝试不同的样式，找到最符合您网站风格的那一款！