什么是图像悬停效果?
图像悬停效果是当有人将鼠标移到图片上时触发的动画。 图像没有保持平坦，而是做出反应。 它可以缩放、模糊、更改颜色或将文本面板滑入视图。 最常见的类型是图像叠加层，其中标题和描述显示为图像上的文本。 你还会看到他们叫 图像翻转效果 or照片悬停效果,而且它们都做同样的事情:拍摄一个普通的图像,并使其读取为“这里还有更多,点击我”
30个悬停动画,其中8个是免费的
1次印象发生在悬停。你得到一个CSS动画库,可以顺利地将你的标题和描述带入,所以文本到达,而不是仅仅弹出到屏幕上。一键应用任何效果,然后在编辑器中循环浏览它们,直到一个适合图像。我通常会尝试三到四个然后再解决,因为在宽阔的风景镜头上看起来很棒的效果可以在紧凑的人像裁剪上感觉很淡。
- 淡入和缩放:图像淡入或缩放,而文本淡入。
- 滑(上、下、左、右):标题面板从任何边缘滑入。
- 推送和显示:图像移位为标题和描述腾出空间。
- 漂浮和闪耀:一个小升降机和一个光扫过图像。
- 8个效果免费:莉莉,萨迪,罗克西,布巴,罗密欧,莱拉,哈妮和奥斯卡。Pro又增加了22个,从马利到杜克。
- CSS上运行:动作保持平稳,因为它不依赖于沉重的脚本。
- 快速测试:在编辑器中交换效果并立即查看更改。
图像悬停效果示例
将指针移到每张卡片上，或在手机上点击它，以查看效果。 这八个是没有 Pro 的效果，每张卡片都是实时图像悬停效果小部件。
艾拉和山姆
萨默塞特 · 六月
百合花
希腊
11天的时间
萨迪
主楼
有氧运动和机器
罗克西
鬼
12,400 英里
大笑话
悬崖
4 床 · EPC B
罗密欧
墙壁
布里斯托·2025
莱拉
发令员 九道菜
蜜
外套
87 件
奥斯卡
所有 30 种图像悬停效果
悬停效果下拉列表按名称列出了 30 个效果。 每一张都在图像上的标题和描述上进行动画处理，它们的叠加、文本和图像的移动方式有所不同。
| 效果 | 需要专业 | 效果 | 需要专业 |
|---|---|---|---|
| 百合花 | 否 | 茱莉亚 | 是的 |
| 萨迪 | 否 | 歌利亚 | 是的 |
| 罗克西 | 否 | 赫拉 | 是的 |
| 大笑话 | 否 | 温斯顿 | 是的 |
| 罗密欧 | 否 | 赛琳娜 | 是的 |
| 莱拉 | 否 | 非常的 | 是的 |
| 蜜 | 否 | 菲比 | 是的 |
| 奥斯卡 | 否 | 阿波罗 | 是的 |
| 马里 | 是的 | 基拉 | 是的 |
| 红宝石 | 是的 | 史蒂夫 | 是的 |
| 米洛 | 是的 | 领导者 | 是的 |
| 蛋白质 | 是的 | 爵士乐 | 是的 |
| 莎拉 | 是的 | 明 | 是的 |
| 佐伊 | 是的 | 莱克西 | 是的 |
| 菊苣根 | 是的 | 公爵 | 是的 |
单击智能链接和弹出内容
您决定当有人点击该卡时会发生什么。将其指向任何带有标准链接的 URL,或者使用 Pro 将操作切换到 Popup 并让人们留在页面上。弹出窗口也不限于文本:将内容类型设置为 保存的部分 它会拉入您已经构建的任何 Elementor 模板。这将一张图像卡变成通往完整简介、产品规格表或联系表的门口,访问者永远不会离开页面。
- 两个点击操作: 通过链接发送流量,或通过弹出窗口 (Pro) 让人们留在现场。
- 弹出窗口中的真实模板 (Pro): 显示库中的图像、文本或完整布局。
- 戏弄,然后告诉: 图像是钩子,弹出窗口包含细节。
图像上的文字：标题、描述和叠加样式
您可以控制卡片如何俯视细节。上传图像并设置其不透明度,并针对正常状态和悬停状态单独过滤。添加标题(选择正确的 HTML 标签,以便帮助您的页面结构)和描述,然后用自己的颜色、类型、阴影和间距自行设计每件作品。
- 单独的标题和描述: 为每个样式进行样式,以便层次结构清晰地读取。
- 图像滤镜: hover上的灰度到颜色的技巧看起来仍然不错,在这里是一个设置的变化。
- 卡框: 背景、边框和盒子阴影,加上圆角和 Pro 填充,因此它位于您的布局中。
Elementor 悬停选项与图像悬停效果小部件
Elementor 自己的图像小部件在“样式”选项卡中具有悬停设置：不透明度、CSS 过滤器和悬停动画，例如 Grow 或 Pulse。 他们改变了图片本身。 他们不能在图像上放置文本，这是此小部件填补的间隙。
| 元素图像小部件 | 图像悬停效果小部件 | |
|---|---|---|
| 悬停时不透明 | 是的 | 是的 |
| 悬停时的CSS过滤器 | 是的 | 是的 |
| 悬停动画 | 移动整个图像的预设 | 30 使叠加层、标题和描述动画化的效果 |
| 图像上的文字 | 不 。 标题位于图像下方。 | 图片上的标题和描述 |
| 悬停时出现的文本 | 否 | 是的 |
| 点击操作 | 链接或灯箱 | 链接或带有 Pro 的弹出窗口 |
| 悬停时切换到第二张图像 | 否 | 不 . 使用 高级图像 为此。 |
图像悬停效果一目了然
一张桌子上关于小部件的主要事实。
| 特点 | 图像悬停效果 |
|---|---|
| 悬停效果 | 30。 其中 22 人需要专业人士。 |
| 图片上的文字 | 标题和描述，标题为 H1 到 H6 的 HTML 标记 |
| 点击操作 | 无、链接或弹出窗口 (Pro) |
| 弹出内容（专业版） | 文本、图像或保存的部分、小部件或页面模板 |
| 图像设置 | 不透明度和过滤器，分别设置为普通和悬停 |
| 悬停的第二张图片 | 否 |
| 触摸屏 | 第一次点击显示文本。 第二个点击跟随链接。 |
| 需求 | 元素和主插件 |
如何在 Elementor 中添加图像悬停效果?
2分钟内即可拥有工作悬停卡,无CSS,无短码。
- 安装并激活主插件,然后使用 Elementor 编辑任何页面。
- 搜索小部件面板 图像悬停效果 并将其拖到您的布局上。
- 上传您的图像并添加标题和描述。
- 开悬停效应下拉,挑一个动画,八个免费,还有22个附带Pro。
- 将单击操作设置为链接,或者设置为带有保存模板的弹出窗口(如果您有 Pro)。
- 键入标题、描述和容器,然后发布。
在发布之前值得做的一件事:在手机上预览卡片。触摸时悬停不存在,因此请检查点击行为是否有意义(常见问题解答中对此进行了更多介绍)。对于按顺序排列的每个设置,请按照 图像悬停效果文档.
在图像上使用悬停效果在哪里?
- 团队网格: hover 上的名称和角色,然后在点击弹出窗口中提供完整的简历,这里是 如何构建团队成员部分.
- 作品集和画廊: 每张照片上的项目标题和 “查看案例研究”链接。
- 服务卡: 简短的描述和通往服务页面的链接。
- 产品展示: 调侃产品图像,然后弹出窗口打开规格。
- 博客和类别图块: 图像引导导航上的悬停说明。
有关将文本和图片组合在一起的更多方法,请阅读 25 元素文本图像技术。相关图像小部件包括 图片旋转木马的,该 可过滤图像库的,该 图片热点 小部件和 高级图像 小部件。
图像悬停效果的常见问题
这些悬停效果会在移动设备上发挥作用吗?
它们是为桌面构建的,桌面上有一个鼠标可以悬停。在触摸屏上,效果通常会在第一个点击显示内容时启动,第二个点击跟随链接或打开弹出窗口。因此计划在移动设备上进行两次点击,并确保文本一旦显示就保持可读性。
CSS不写怎么创建简单的图像悬停效果?
将"图像悬停效果小部件掉到您的页面上,上传图像,添加标题和描述,并从下拉中选择动画,即是,没有CSS"小部件在幕后为您编写CSS,因此即使是相当涉及的悬停卡也易于组合。
我可以在单击弹出窗口中打开团队简介或产品详细信息吗?
是的,使用 Pro。将名称放入标题和描述中的角色中,将单击操作设置为弹出窗口,然后选择内容类型:已保存部分。将 bio 构建为 Elementor 中的模板,然后在此处选择。单击照片,该完整布局将在弹出窗口中打开。
30个图像悬停效果都免费吗?
8号效果免费:莉莉、萨迪、罗克西、布巴、罗密欧、蕾拉、哈妮和奥斯卡,另外22个附带Master Addons Pro,以及弹出内容、圆角和填充控件,标题、描述、链接和图像过滤器都在免费版中工作。
当有人在 Elementor 中的图像上方悬停时，如何显示文本？
添加图像悬停效果小部件，上传图像，键入标题和描述并选择悬停效果。 文本保持隐藏直到指针在图像上方，然后在其中进行动画处理。 Elementor 自己的图像小部件在图像上没有设置文本的设置。
许多动画图像卡会减慢我的网站速度吗?
CSS上运行效果,所以一页一把没问题,实际减慢速度的是图像权重,所以先压缩你的图像,一页超过20张左右的卡片,开启懒加载,第一张油漆保持快速。
我可以在不同的图像上使用不同的悬停效果吗?
设置一次覆盖一张卡片。要混合效果,请为每个图像添加单独的图像悬停效果小部件并独立设置它们。这就是您获得一个图库的方式,其中卡片的动画方式并不相同。
在纯文本弹出窗口中"保存的部分"有什么好处?
Saved Section 是一个 Pro 选项,它为您提供了弹出窗口内部的完整 Elementor 编辑器,您可以添加图像、按钮、列、视频或表单,而不是纯文本,因此弹出窗口看起来像您网站的其余部分,而不是裸文本框。
如何在Elementor中悬停悬停图像？
对于普通缩放，选择 Elementor 的图像小部件，打开“样式”选项卡，将悬停动画设置为增长。 在图像悬停效果小部件中，一些效果缩放图像，同时标题和描述进入。
我可以在悬停时更改图像吗？
不是这个小部件。 它保留一张图像并为其顶部的叠加层和文本设置动画。 要在悬停时交换到第二张图像，请使用 高级图像 小部件并打开显示悬停图像。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
