图像悬停效果

悬停时显示标题和标题的图像将平坦的画廊变成了人们想要触摸的东西。 图像悬停效果 小部件在 Elementor 的主插件 CSS悬停动画中包裹任何图像,因此当光标降落在它上时,标题、描述和链接滑动、淡入或缩放到视图中。

此页面是设置参考。有关效果的实时演示以及免费或专业版的内容,请参阅 元素器图像悬停效果小部件 页。

您选择指定的效果之一,放入图像,添加叠加文本,然后对颜色和过滤器进行样式设计。无需自定义 CSS。本指南涵盖了小部件中的每个设置。

图像悬停效果小部件的作用 #

Widget拍摄一张图像,并在上面掉落一个动画覆盖层,悬停在上面,它可以显示一个标题,一个描述,以及一个按钮或链接,其运动来自预设的效果,有30个命名效果,其中8个是免费的(莉莉,萨迪,罗克西,布巴,罗密欧,莱拉,蜂蜜和奥斯卡),还有22个附带大师Addons Pro。

三个选项卡运行它。 内容 保存效果、图像和覆盖文本。 风格 处理图像不透明度、滤镜、边框以及标题和描述颜色。 高级 是通常的元素间隔和可见性。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 图像,以及您想要在悬停时显示的标题和标题文本。

如何添加图像悬停效果小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 图像悬停效果的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖到页面上,它加载了示例图像和覆盖层,您可以编辑。

选择效果和图像 #

打开 内容 选项卡。 效果与图像 部分是您设置悬停动画并加载图片的部分。

• 悬停效果: hover上使用的命名动画(下一步将详细介绍)。
• 上传图片: 从媒体库中选择图像。
• 图像大小和图像分辨率: 作物和决议发挥了作用。
• 链接还是弹出窗口?: 将整个图像作为链接,或打开弹出窗口(弹出内容需要 Pro)。

选择悬停效果 #

的 悬停效果 dropdown列出了30个被命名的css效果,前八个是免费的,其余的都标有pro,每一个都以不同的方式对图像和覆盖文本进行动画处理,从柔和的淡入淡出到滑入的标题。

• 萨迪、莉莉、莱拉: 将标题和标题淡入黑暗的图像上。
• 罗克西、布巴、罗密欧: 将边框或面板与文本一起滑入。
• 亲爱的,奥斯卡,马利(专业): 显示下划线或移动标题。
• 缩放和模糊变体: 缩放或软化文本背后的图像。

选择图像 #

单击 上传图像 要打开媒体库,请选择或上传您的图片。您选择的任何效果都运行在此图像之上。

添加标题 #

打开 标题 hover 上显示的标题部分。键入文本并设置 HTML 标签,以便它正确读取 SEO。

• 标题: heading 文字,如果你的站点使用 Elementor AI,Elementor 自己的带有 AI 链接的 Write 也会显示在这里。
• HTML 标签: 航向级别,H1 至 H6。

添加描述和链接 #

打开 描述 节添加标题下显示的标题悬停。返回 效果与图像,如果你设置 链接还是弹出窗口? 到弹出窗口, 内容类型 並 内容 fields决定弹出窗口显示什么弹出窗口内容需要pro。

• 内容类型: 弹出窗口显示的内容:图像、文本、保存的部分、保存的小部件或保存的页面模板 (Pro)。
• 内容: 弹出文本,在完整的所见即所得框中编辑。
• 链接还是弹出窗口?: URL 点映像或将其打开在弹出窗口中。

样式图像和覆盖 #

打开 风格 选项卡。 图像 section控制画面在悬停前和悬停期间的样子,而这正是很多效果实际来源的地方。

• 图像不透明度和悬停不透明度: 图像在静止和悬停时的可见度。
• 图像过滤器和悬停图像过滤器: 每个状态的模糊度、亮度和对比度。
• 边界、边界半径 (Pro)、盒影: 图像周围的框架。

在图像部分下,分开 标题 並 描述 部分处理覆盖文本的颜色和排版。

常见用例 #

• 投资组合 在悬停上显示项目名称和链接。
• 团队网格 在每张照片上显示姓名和角色。
• 服务瓷砖 每张图片都有标题和简短标题。
• 博客缩略图 这使得帖子标题浮出水面。
• 产品画廊 将图像与名称和按钮配对。

使用图像悬停效果小部件的技巧 #

• 使用清晰的图像。 Overlay使画面变暗,所以忙碌的镜头可以使文字难以阅读,中间有空间的较平静的图像效果最好。
• 保持标题简短。 标题下的一行读起来比叠加在覆盖层中的段落更好。
• 将效果与内容相匹配。 微妙的淡入淡出适合投资组合;粗体幻灯片适合促销活动。
• 设置正确的标题标签。 H2或H3用于图库标题,而不是H1,除非它是页面的主要标题。
• 在移动设备上进行测试。 触摸时没有悬停,因此当有人轻按时检查覆盖层仍然有意义。

观看视频教程 #

更喜欢在屏幕上跟进?下面的视频教程从头到尾浏览 Image Hover Effects 元素,展示元素编辑器中的效果、叠加文本和造型如何工作。

常见问题 #

包裹起来 #

的 图像悬停效果小部件 将静态图像变成交互式图像:选择效果、加载图像、添加标题和标题,然后对不透明度、过滤器和文本进行样式。有关小部件,请参阅 信息框小部件 和 翻转框小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。