主要外卖
- 图像的元素器悬停效果实时显示在图像小部件的样式选项卡中,悬停选项卡下有四个控件:不透明度、CSS 过滤器、转换持续时间和悬停动画。
- Elementor 中的灰度到颜色悬停效果不需要代码:在"正常"选项卡上的 CSS 过滤器下将饱和度设置为 0,在"悬停"选项卡上将饱和度设置为 100。
- Elementor的悬停动画预设,例如增长,移动整个图像,增长预设将图像缩放到悬停时其大小的110%。
- Elementor的图像小部件无法在悬停器上的图像上显示标题或描述,因此文本叠加需要容器解决,自定义CSS或附加组件小部件。
- Master Addons Image Hover Effects 小部件具有 30 个命名的悬停效果,可为图像上的标题和描述设置动画,这些效果是从一个悬停效果下拉中选择的。
Elementor悬停效果可以通过三种方式添加到图像中,图像小部件具有悬停状态的不透明度和CSS过滤器设置,它还具有移动图片的悬停动画预设,对于出现在图像上方的标题和描述,您需要为其构建的小部件,例如 图像悬停效果.
本指南涵盖了每条路线的确切设置,并在 Elementor 4.3 上进行了测试。如果您只想让图片做出反应,请从前两条开始;如果您想在图像上显示文本,请跳至第三条。
目录
悬停设置位于 Elementor 中
选择图像小部件,打开 风格 tab,并在image部分下方查看,在大小控件下方有两个选项卡,normal和hover,hover选项卡上的所有内容仅在指针位于图像上方时适用,elementor在其中解释了想法 悬停效果介绍.
| 控制 | 它在悬停上做什么 |
|---|---|
| 不透明度 | 将图像从 0 淡入或淡出,从 0 淡入或淡出 |
| CSS 过滤器 | 改变模糊度、亮度、对比度、饱和度和色调 |
| 过渡持续时间 | 设置更改需要多长时间(以秒为单位) |
| 悬停动画 | 播放预设的动作,例如 Grow |
方法 1:不透明度和 CSS 过滤器
Hover 上图像本身应该改变时使用不透明度和 CSS 滤镜,经典的例子是黑白相间的照片,当指针到达时会变成彩色。
- 选择图像小部件并打开 风格.
- 上 正常 tab,点击旁边的铅笔 CSS 过滤器 和拖 饱和度 到0。图像变灰色。
- 切换到 悬停 选项卡,打开 CSS 过滤器 再次将饱和度设置为 100。
- 套 过渡持续时间 达到约 0.4,因此颜色会褪色。
- 可选:将正常情况下的不透明度设置为 0.85,将悬停设置为 1,以稍微提亮。
2个相同的标签,给你一个清晰的模糊,一个明亮的昏暗图像,或者色调偏移,保持0.3到0.5秒之间的过渡,比这短看起来像闪烁,更长的感觉很慢。
方式 2:悬停动画预设
Hover Animation 在指针过了的时候移动整个图像,它是在 Hover 选项卡底部的一个下拉,它不需要其他设置。
- 选择图像小部件并打开 风格那么, 悬停 选项卡。
- 打开 悬停动画 并选择预设。 成长 是最人们想要的。
- 预览页面并将指针移到图像上。
Grow 将图像放大超过其原始边缘,因此它可以在紧密的网格中与邻居重叠。如果您希望图片在固定帧内缩放,则需要几行 CSS。
方法 3:图像上文本的小部件
Hover 上图片上方应出现标题和描述时,使用专用小部件,Elementor 的图片小部件在图片下方显示其标题,并且没有设置将文本放在顶部。
这些步骤使用主插件中的图像悬停效果小部件。
- 使用 Elementor 编辑页面,搜索小部件面板 图像悬停效果 并将其拖到页面上。
- 下 效果与图像,上传图片。
- 打开 悬停效果 30种效果中下拉并选择其中一种,它们按名称列出,以莉莉、萨迪、罗克西和布巴开头。
- 键入 标题 和 描述 在他们自己的部分。
- 套 链接还是弹出窗口? 如果点击应该去某个地方。
- 在"样式"选项卡中,设置覆盖颜色、正常和悬停的图像不透明度以及每个文本层的排版。
在安装任何东西之前尝试一下效果。 的 图像悬停效果小部件页面 有八张可以悬停的现场卡片,以及 30 种效果的完整列表。
其中 8 个效果无需 Pro 许可证即可工作,22 个需要 Master Addons Pro。每个小部件保存一张图像,因此悬停卡网格是几个并排的小部件。
视频教程
这个四分钟的视频从空页面设置图像悬停效果小部件。
您应该使用哪种方式?
选择悬停时应该改变的内容:图片、位置或顶部的文本。
| 你想要 | 用 | 需求 |
|---|---|---|
| 灰度到颜色,模糊到锐利,暗淡到明亮 | "悬停"选项卡上的 CSS 过滤器和不透明度 | 元素 |
| 要生长的图像或脉冲 | 悬停动画 | 元素 |
| 保持在其框架内的变焦 | CSS 类和几行 CSS | 元素器并在某个地方添加 CSS |
| 图像上的标题和描述 | 图像悬停效果小部件 | 主插件 |
| 替换第一个图像的第二个图像 | 高级图像小部件,或容器背景 | 主插件或单独的元素器 |
有关以其他方式组合的文本和图片,请参阅 图像上的元素文本.
悬停效果对手机有效吗?
不像悬停,因为触摸屏没有指针可以悬停。Elementor 的 Style 选项卡效果不会在手机上启动,这对颜色变化没有伤害。
Image Hover Effects 小部件,第一次点击通常会显示文本,第二次点击会跟随链接,如果文本是必不可少的,例如价格或名称,也要将其放在小屏幕上可见的地方。
常见问题
如何在 Elementor 中的图像中添加悬停效果?
择"图像小部件,打开"样式选项卡并切换到"悬停选项卡,设置悬停状态的不透明度或CSS过滤器,或选择悬停动画,如"增长。添加0.3至0.5秒的过渡持续时间,这样更改就很顺利。
Elementor 在没有插件的情况下是否具有图像悬停效果?
是。Elementor中的图像小部件具有针对不透明度的悬停控制,CSS过滤器和悬停动画预设。它们更改或移动图像。图像上的文本需要附加小部件或自定义CSS。
如何使图像在 Elementor 中的悬停从黑白变为彩色?
Image 小部件的样式选项卡中, 在正常选项卡上打开 CSS 过滤器, 设置饱和度为 0, 然后在悬停选项卡上打开 CSS 过滤器, 设置饱和度为 100。将过渡持续时间设置为 0.4 秒左右。
Elementor 中的图像上悬停时,我如何显示文本?
使用为其制作的小部件。使用主插件,添加图像悬停效果小部件,上传图像,键入标题和描述并选择悬停效果。文本将保持隐藏状态,直到指针位于图像上方。
为什么我的 Elementor 悬停效果不起作用?
Hover 选项卡上检查设置不是正常选项卡,过渡时长在 0 以上,在手机或平板上没有 hover,所以用鼠标测试,如果使用自定义 CSS,确认小部件上的类名与代码中的。
最后的想法
图像的元素悬停效果有三种。样式选项卡更改图像的外观,悬停动画移动它,文本叠加需要一个小部件。从内置控件开始,因为它们不需要任何尝试。
当您想要图像上的标题和描述时, 图像悬停效果小部件 有 30 种效果可供选择,并且 定价页面 显示哪个计划包括所有这些。
相关阅读
