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

在您的网站上添加悬停效果可能看起来是一个小细节，但它可以提升网站的外观和可用性。当访问者将鼠标悬停在图像或按钮上并看到它略微变化时，它表明该元素是可交互的。. 

这种微妙的动态效果可以提高用户参与度并降低跳出率。悬停效果在电子商务中尤其有用。它们允许购物者更近距离地预览产品，鼓励他们进一步探索并继续结账。

在 WordPress 中添加图片悬停效果有很多方法，从简单的渐变到引人注目的翻转动画。下面，您将找到几种入门方法！

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

在本文中，我们收集了五种简单的方法来为您的网站添加悬停效果。请选择最适合您的一种方法！

方法1：使用插件

使用插件可以为您节省大量时间和精力，特别是当您希望在同一站点上使用多种悬停效果时。

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

使用像Image Hover Effects Ultimate这样的插件可以使这个过程变得更加容易。这个插件对每个人都是免费的，并为每个元素提供了广泛的效果。要开始使用，只需按照下面的教程进行安装： 

安装插件

• 打开您的WordPress管理区域。.
• 点击 添加插件 从侧边栏的 插件 菜单。

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

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

使用图像悬停效果WordPress插件

• 安装插件后，您将在仪表板中看到一个新的图片悬停菜单。

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

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

当你找到喜欢的样式，点击 创建样式

• 将出现一个弹出窗口。在名称字段中输入标题，并从布局中选择一个效果（第 1、第 2 或第 3）。然后点击保存以继续。
• 您将被带到一个新页面，在那里您可以自定义设置，例如高度、宽度和不透明度。尝试不同的设置以查看最佳效果。.

• 当你对设置满意后，点击 编辑

• 另一个弹出窗口将会出现。在这里，您可以自定义放大位置。. 

• 您也可以通过点击选择图片按钮来替换图片。
• 设置完成后，点击 提交 以保存你的悬停效果。

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

• 现在，您的简单图像悬停效果已经准备好，可以在您网站的任何部分使用。. 

方法 2：使用 CSS

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

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

• 导航到您要添加悬停效果的帖子。.
• 通过点击 封面 块从 + 添加图像。

• 将您的内容输入到封面块中。在这里，我们将添加一个标题和一个按钮。

• 根据您的喜好设置字体和样式。.
• 将页面保存为草稿。.
• 接下来，前往您的仪表板中的外观菜单。

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

body { 显示: flex; 对齐内容: 居中; 对齐项目: 居中; 高度: 100vh; 背景: #0f0f0f; 外边距: 0; 字体家族: Arial, 无衬线字体; } .hover-underline { 字体大小: 2rem; 颜色: #ffffff; 位置: 相对; 显示: 行内块; } .hover-underline::after, .hover-underline::before { 内容: ''; 位置: 绝对; 宽度: 100%; 高度: 2px; 背景: 线性渐变(向右, #ff0000, #00ffff); 底部: -5px; 左侧: 0; 变换: scaleX(0); 变换原点: 右侧; 过渡: 变换 0.4s 缓出; } .hover-underline::before { 顶部: -5px; 变换原点: 左侧; } .hover-underline:hover::after, .hover-underline:hover::before { 变换: scaleX(1); }
 

• 点击发布以保存代码。

• 现在返回您的文章并选择要应用下划线效果的文本。.
• 打开块侧边栏中的高级部分，然后在附加CSS类字段中输入underline-hover。

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

有这么多悬停效果可供选择，所以请选择最适合您风格的那个。您可以自己学习编写CSS，也可以从WordPress社区找到示例。这一切都在那里！

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

像Elementor这样的页面构建工具允许您以很大的创造力构建您的网站。它具有内置的悬停效果，所有这些都可以使用，使您的网站更加生动，而无需任何编码。.

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

设置效果：

• 从管理后台打开 Elementor 编辑器。
• 添加您的图像。.

• 选择您的图像，然后转到 样式 标签。
• 向下滚动并点击 悬停。

• 在 悬停动画 下拉菜单中，您将找到各种可用的效果。

• 这里我们选择了 Grow 效果作为示例。您可以自定义过渡持续时间、透明度和其他设置以匹配您网站的设计。

• 完成后，您将能够立即看到效果，而无需预览。. 

方法4：使用Flipbox插件

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

这种效果非常适合摄影图像，您可以在正面显示照片，在背面显示相机细节。但可能性是无穷的。.

• 从您的 WordPress 仪表板中，点击 插件 菜单。然后，选择 添加插件。
• 在搜索栏中输入 Flipbox - Awesome Flip Boxes Image Overlay。

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

• 要创建翻转框，请转到 Flip Box 菜单并点击 Create New。
• 选择您喜欢的任何动画。找到后，点击创建样式。

• 将出现一个弹出窗口。选择所需的布局（第 1、第 2 或第 3）并输入标题。. 

• 单击保存以继续。
• 接下来，您将被带到自定义菜单，您可以在那里设置效果并添加内容。.

• 向下滚动找到 预览 标签。点击 编辑 以自定义翻转框的正面和背面内容。

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

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

• 就这样，这是最终的产品！ 

方法5：使用Gutenberg块

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

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

例如，让我们一步一步地制作一个简单的淡入淡出效果教程：

• 导航到您希望添加悬停效果的文章或页面。.
• 点击+添加新块，然后选择封面块。

• 在封面块内，添加一个段落块。

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

• 然后选择 Cover 块以添加自定义 CSS 类。
• 在右侧边栏中打开 Advanced 部分。
• 在 附加 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还是页面构建器，您都可以自由选择最适合您的方法。尝试不同的样式，找到最适合您网站的样式！