主要外卖
- Elementor没有单一的设置来更改悬停上的图像,因此交换是使用图像后面的容器背景或接受第二张图像的小部件来完成的。
- Elementor 中在悬停时更改图像的无插件方式是将第二张图像设置为容器背景,并将图像小部件的悬停不透明度设置为 0。
- Master Addons 高级图像小部件使用一个开关(显示悬停图像)交换图像,该开关位于内容选项卡的悬停图像部分。
- Elementor的悬停动画预设Grow将悬停时的图像缩放到110%,并且图像会增长超过其原始边缘。
- 停留在帧内的悬停放大器需要图像小部件上的 CSS 类和三个缩放隐藏溢出内部图像的简短 CSS 规则。
Elementor 中更改悬停上的图像, 您可以在第一个图像后面或内部放置第二个图像, 并在指针到达时显示它。Elementor 可以通过容器背景无需插件即可执行此操作, 悬停图像小部件通过一个开关进行缩放。悬停上的缩放需要一个预设用于基本缩放, 或者几行 CSS 用于保持在其帧中的缩放。
以下所有四种方法均在 Elementor 4.3 上构建和测试。
目录
使用哪种方法
其中两种方法交换图像并两次缩放图像。在每对中,一种仅使用 Elementor,另一种更快或更整洁。
| 目标 | 方法 | 需求 | 代码 |
|---|---|---|---|
| 更改为第二张图像 | 容器背景加上悬停不透明度 | 元素 | 没有 |
| 更改为第二张图像 | 高级图像小部件 | 主插件 | 没有 |
| 缩放图像 | 悬停动画:成长 | 元素 | 没有 |
| 放大固定框架内部 | 图像小部件上的 CSS 类 | 元素和添加 CSS 的地方 | 三个规则 |
使用容器背景更改悬停上的图像
此方法不需要插件,第二张图像是容器的背景,第一张图像作为普通图像小部件位于其顶部,在悬停时,顶部图像淡出,背景显示通过。
- 添加一个容器并将其填充设置为 0。
- 在容器的 风格 选项卡,打开 背景、选择经典,上传悬停时应出现的图像。将位置设置为中心 中心,将大小设置为覆盖。
- 拖动一个 图像 widget 进入容器,然后选择应该首先显示的图像。
- 选择图像小部件,打开 风格 并切换到 悬停 选项卡。
- 套 不透明度 到0和 过渡持续时间 至0.4左右。
2张比例相同的图片,容器从图片小部件中取出它的高度,所以会裁剪出形状不同的背景。
使用悬停图像小部件更改悬停图像
具有悬停图像字段的小部件从一个面板进行相同的交换。下面的步骤使用 高级图像小部件 来自主插件。
- 搜索小部件面板 高级图像 并将其拖到页面上。
- 在 图像 节, 选择主图像。
- 打开 悬停图像 剖开并打开 显示悬停图像.
- 选择出现的字段中的第二张图像。
- 预览页面并悬停。
该小部件还配有丝带、链接和灯箱,适合产品照片:首先是前视图,悬停后视图,角落里有一条新丝带。
想要悬停文本吗? 图像悬停效果 在一张图像上制作标题和描述动画,并有 30 种效果可供选择。
使用增长预设将图像放大到悬停状态
最快的缩放是预设。选择图像小部件,打开 风格,切换到 悬停 选项卡并设置 悬停动画 到 成长。当指针位于图像上方时,图像会缩放到 110%。
Grow 对于周围有空间的单个图像效果很好,在紧密的网格中它与旁边的图像重叠,所以使用那里的下一个方法。
将悬停图像缩放到其帧内
对于保留在图片自身框内的缩放,请为图像小部件提供 CSS 类并添加三个规则。小部件保持其大小,图像在其中缩放。
- 选择图像小部件并打开 高级.在 CSS 课程的,类型
hover-zoom. - 将下面的 CSS 添加到您的网站。
.hover-zoom { overflow: hidden; border-radius: 10px; }
.hover-zoom img { transition: transform 0.4s ease; display: block; }
.hover-zoom:hover img { transform: scale(1.08); }
CSS 走向何方取决于您的设置。Elementor Pro 在高级选项卡中有一个自定义 CSS 框。没有它,请使用 WordPress 中的外观、自定义、附加 CSS 或 自定义 CSS 扩展 在主插件。1.08 更改为 1.15 更强缩放。
出了四个问题
这些效果的大多数问题来自图像大小和错误设备上的测试。
- 2个图像比例不同,交换后跳转或作物,在相同宽度和高度下均导出。
- Zoomed图片覆盖附近内容,Grow没有帧,图片坐近时用CSS方法。
- Phone上什么都不会发生,触摸屏没有悬停,确保第一个图像单独工作,因为电话访问者可能永远看不到第二个。
- Hover 图像很重。压缩两个文件, 因为一个大的第二张图像可以在第一个 hover 上显示为空白闪光灯。
常见问题
如何在没有插件的情况下在 Elementor 中更改悬停图像?
将悬停图像放在容器上作为其背景,然后将带有第一个图像的图像小部件放置在该容器内,在图像小部件的样式选项卡中,打开悬停选项卡,将不透明度设置为0,过渡持续时间约为0.4秒。
如何在Elementor中悬停悬停图像？
择"图像小部件,打开"样式,转到"悬停选项卡,将"悬停动画设置为"增长,对于保持在图像帧内的缩放,向小部件添加一个CSS类,并在已溢出设置为隐藏的包装器内缩放具有变换的图像。
图像悬停效果小部件可以在悬停时更改图像吗?
No。Image Hover Effects 保留一个图像并在其上设置标题和描述动画。要切换到第二个图像,请使用高级图像小部件并打开显示悬停图像,或使用容器背景方法。
为什么我的图像在变焦时与其他内容重叠?
Grow 动画将整个图像缩放到其框之外。给图像小部件一个类,将溢出设置为隐藏在其上并缩放内部的 img 元素。然后该框保持相同的大小并剪辑缩放。
我可以用这个更改 WooCommerce 中的悬停产品映像吗?
Elementor中放置自己的图像,这些方法都起作用。由WooCommerce或产品小部件生成的产品网格是不同的情况,取决于主题或打印它们的小部件。
最后的想法
Elementor 中要更改悬停上的图像,请使用带有褪色图像小部件的容器背景,或带有悬停图像字段的小部件。要缩放,请使用 Grow 获取快速结果,并在图像必须停留在帧中时使用 CSS 类。
的 高级图像小部件 在一个面板中处理交换,并且 图像悬停效果 涵盖文本覆盖。
相关阅读
