如何在 WordPress 中添加图像悬停效果(循序渐进)

想了解如何在 WordPress 中添加图像悬停效果?

图片悬停效果可以让您的网站更具互动性和吸引力.这会创造更好的第一印象并改善在您网站上花费的时间.

在本文中,我们将逐步向您展示如何在 WordPress 中添加图像悬停效果.

How to add image hover effects in WordPress

什么是图像悬停效果?

图像悬停效果允许您向静态图像添加交互元素,例如动画、缩放效果、弹出窗口等.

例如,您可以将图片翻转以显示您的定价或指向您的投资组合的链接.

图像悬停还为您提供了一种创造性的方式来显示您的照片、画廊和缩略图.

交互式图像和悬停元素可以在很多方面帮助您的网站:

  • 改善访问者在您网站上停留的时间
  • 以创造性的方式向访问者展示内容
  • 让您的用户知道网站元素是可点击的

如何在 WordPress 中创建图像悬停效果

将图像悬停效果添加到 WordPress 网站的最佳方法是使用 WordPress 插件.

使用插件,您无需花时间编辑、格式化和添加 CSS 来创建图像效果.它只是有效.

您可以使用各种插件来创建独特的图像悬停效果和动画.

在本教程中,我们将向您展示添加所需悬停效果的四种不同方法.

  • 在 WordPress 中添加图像悬停 Flipbox 效果
  • 在 WordPress 中添加图像缩放和放大效果
  • 在 WordPress 中添加图像动画效果
  • 在 WordPress 中添加图像悬停弹出效果

1.在 WordPress 中添加图像悬停 Flipbox 效果

翻转框是当鼠标悬停在其上方时翻转的框.

您可以将此动画添加到图像中以显示文本,甚至在悬停时更改图像.

Image hover flipbox

您可以控制图像的翻转方式,以及图像两侧的设计.

如果您是一名摄影师,您可以使用它来展示您的作品并分离您的投资组合.

添加图像翻转框效果的最简单方法是使用 WordPress 插件.插件可让您快速创建和自定义这些效果.

我们推荐使用 Flipbox – Awesomes Flip Boxes Image Overlay 插件.这是适用于 WordPress 的最佳翻转框和图像悬停插件.

此插件可让您简单地向 WordPress 图像添加自定义翻转框效果.

Image hover flipbox plugin settings

它带有数十种不同的动画效果和预先构建的模板.您甚至可以控制颜色并添加您自己的自定义 CSS.

有关更多详细信息,请参阅有关如何在 WordPress 中创建翻转框叠加和悬停的指南.

2.在 WordPress 中添加图像缩放和放大效果

图像缩放效果让您的用户可以看到他们在正常尺寸的图像中看不到的细节.

这对于具有高细节水平的产品教程和图像非常有用.

您也可以在您的在线商店中使用它来添加像亚马逊一样的缩放效果.

Image zoom magnify

为图像添加图像缩放和放大效果的最简单方法是使用 WordPress 插件.

我们建议使用 WP Image Zoom 插件.此插件可让您简单地为图像添加缩放和放大效果.

WP Image Zoom plugin settings

它还配备了一些功能,让您可以选择变焦镜头的形状、变焦级别等.

有关更多详细信息,请参阅有关如何在 WordPress 中为图像添加放大缩放的指南.

3.在 WordPress 中添加图像动画效果

您可以向 WordPress 添加各种额外的悬停效果.

例如,您有动画图片库、灯箱图片、比较图片、文字叠加等等.

Image animation effect hover

要添加此类悬停效果,我们建议使用 Image Hover Effects Ultimate 插件.

此插件非常轻巧,因此不会影响您的网站性能和加载速度.它也非常易于使用.您只需点击几下即可添加独特的图像效果.

您需要做的第一件事是安装并激活 Image Hover Effects Ultimate 插件.有关更多详细信息,请参阅有关如何安装 WordPress 插件的分步指南.

安装并激活插件后,您需要在 WordPress 管理员中单击"图像悬停".这将显示八种不同的图像悬停效果供您选择.

Choose image hover effect

在本教程中,我们将使用"字幕效果"效果.这会在鼠标悬停时在图像上添加动画文本.

首先,单击"字幕效果"框.这会显示一个包含不同动画选项的菜单供您选择.

Image hover animation create style

找到您喜欢的图像效果后,单击"创建样式".

在弹出框中,为您的悬停效果命名并选择布局.您选择的布局编号与有序的图像序列相匹配.

记得点击"保存".

Name new image hover

在下一个屏幕上,您将有多种选项来自定义悬停效果.

但是,我们将保留默认动画选项.

Hover animation settings

如果您进行更改,您会看到它们出现在"预览"框中.

要更改默认图片,请将鼠标悬停在图片上,然后点击"编辑"选项.

Edit hover animation

在此弹出窗口中,您可以更改悬停时显示的标题和说明.

要上传您的图片,请点击"图片"标题下方的框,然后上传或从您的媒体库中选择一张图片.

Change image hover image

如果您希望您的图片将用户带到您网站上的另一个页面,您还可以添加链接和按钮文本.

完成后,点击"提交".

Image hover shortcode

要将图片添加到您的网站,请复制"短代码"框中的短代码.

然后,打开您希望图像出现的任何页面、帖子或小部件,并粘贴短代码.

Paste hover animation shortcode

确保点击"发布"或"更新"以保存更改并使图像悬停效果生效.

4.在 WordPress 中添加图像悬停弹出效果

上述插件将帮助您添加翻转框、悬停效果、动画等功能.

如果您想添加上述插件未涵盖的其他图像悬停效果怎么办?

最好的方法是使用 WordPress 自定义 CSS 插件.这使您无需编辑任何代码即可对图像进行视觉更改.

您可以手动编辑 CSS 文件或通过 WordPress 定制器添加 CSS,但是,使用插件是最简单的选择.

我们建议使用 CSS Hero 插件.此插件可让您在 WordPress 网站上编辑几乎所有 CSS 样式,而无需编写任何代码.

CSS hover effects

有各种专门用于图像的内置 CSS 效果.

有关安装插件的更多详细信息,请参阅我们关于如何安装 WordPress 插件的指南.

安装插件后,您需要点击"Proceed to Product Activation"按钮.

Activate CSS Hero

这将指导您完成插件激活过程.

插件激活后,您可以开始自定义图像.

打开一个页面或帖子,其中包含您想要制作动画的图像,然后点击页面顶部的"CSS Hero".

这将打开编辑器菜单,您可以在其中添加各种不同的 CSS 效果.

我们将在悬停效果上添加一个图像弹出窗口.首先,您需要单击要编辑的图像,然后单击"片段".

之后,点击"悬停效果".

CSS Hero hover effects

这将显示不同 CSS 效果的菜单.接下来,选择".hvr-pop"效果并点击"应用".

点击‘保存&发布",CSS 效果将自动应用于您的图像.

Save image hover changes

我们希望本文能帮助您了解如何在 WordPress 中添加图像悬停效果.您可能还想查看我们关于如何优化网络图片的指南和我们的图片 SEO 初学者指南.

3

发表回复