1. David Wu首页
  2. WordPress
  3. WordPress建站教程

如何给WordPress中的图像添加悬停效果,4款插件轻松搞定(详细步骤)

图像悬停效果可以使您的网站更具交互性和吸引力。这样可以产生更好的第一印象,并改善您在网站上花费的时间。

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

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

什么是图像悬停效果?

图像悬停效果使您可以向静态图像添加交互元素,例如动画,缩放效果,弹出窗口等。

例如,您可能会有翻转显示您的价格或投资组合链接的图像。

图像悬停还为您提供了一种新颖的方式来显示照片,画廊和缩略图。

交互式图像和悬停元素可以通过多种方式帮助您的网站:

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

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

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

使用插件,您无需花费时间进行编辑,格式化和添加CSS即可创建图像效果。它只是工作。

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

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

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

1.在WordPress中添加图像悬停翻转框效果

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

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

图像悬停翻转框

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

如果您是摄影师,则可以使用它来展示您的作品并分离您的作品集。

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

我们建议使用Flipbox – Awesomes Flip Boxes图片叠加插件。这是WordPress最好的翻页盒和图像悬停插件。

使用此插件,您可以简单地将自定义翻转框效果添加到WordPress图像中。

图像悬停翻转框插件设置

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

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

图像缩放效果使您的用户可以看到普通尺寸的图像中看不到的细节。

这对于产品教程和具有高细节水平的图像很有用。

您也可以在在线商店上使用它来添加缩放效果,例如亚马逊。

图像缩放放大

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

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

WP Image Zoom插件设置

它还具有一些功能,可让您选择变焦镜头的形状,变焦级别等等。

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

您可以将各种附加的悬停效果添加到WordPress。

例如,您具有动画图像库,灯箱图像,比较图像,文本叠加等。

图像动画效果悬停

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

该插件非常轻巧,因此不会影响您的网站性能和加载速度。它也非常易于使用。您可以通过单击几下添加独特的图像效果。

您需要做的第一件事是安装并激活Image Hover Effects Ultimate插件。

安装并激活插件后,您需要在WordPress管理员中单击“ Image Hover”。这将显示八种不同的图像悬停效果,您可以从中选择。

选择图像悬停效果

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

首先,点击“字幕效果”框。这将显示一个菜单,其中包含不同的动画选项。

图像悬停动画创建样式

找到喜欢的图像效果后,单击“创建样式”。

在弹出框中,命名您的悬停效果并选择布局。您选择的版面编号与图像的有序顺序匹配。

记住点击“保存”。

命名新图像悬停

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

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

悬停动画设置

如果进行更改,您会看到它们显示在“预览”框中。

要更改默认图像,请将鼠标悬停在图像上,然后单击“编辑”选项。

编辑悬停动画

在此弹出窗口中,您可以更改将在悬停时显示的标题和描述。

要上传图片,请点击“图片”标题下方的框,然后上传或从媒体库中选择图片。

更改图像悬停图像

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

完成后,点击“提交”。

图像悬停简码

要将图像添加到您的网站,请在“短代码”框中复制该短代码。

然后,打开要显示图像的任何页面,帖子或小部件,然后粘贴简码。

粘贴悬停动画简码

确保单击“发布”或“更新”以保存所做的更改并使图像悬停效果生效。

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

上面的插件将帮助您添加翻转框,悬停效果,动画等功能。

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

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

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

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

CSS悬停效果

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

插件安装完成后,您需要点击“继续进行产品激活”按钮。

激活CSS Hero

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

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

打开包含要制作动画的图像的页面或帖子,然后单击页面顶部的“ CSS Hero ”。

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

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

之后,点击“悬停效果”。

CSS Hero悬停效果

这将显示不同CSS效果的菜单。接下来,选择“ .hvr-pop”效果,然后单击“应用”。

单击“保存并发布”,CSS效果将自动应用于您的图像。

保存图像悬停更改

我们希望本文能帮助您学习如何在WordPress中添加图像悬停效果。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/132692

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注