主要外卖
- Elementor 中的 CSS 图像悬停效果需要两个步骤:在高级 CSS 类下将类名称添加到图像小部件,然后粘贴针对该类的 CSS 规则。
- 本指南中的五个 CSS 图像悬停效果是帧内的缩放、灰度到颜色、带有阴影的升降机、深色覆盖层和向上滑动的标题。
- Elementor Pro 在每个小部件的高级选项卡中都有一个自定义 CSS 框,如果没有 Pro,相同的 CSS 可以进入外观、自定义、附加 CSS。
- Elementor的图像小部件将其标题打印为图形内部的无花果标题,这使得仅使用CSS就可以实现滑动标题。
- Elementor 中的灰度到颜色和不透明度更改不需要 CSS,因为图像小部件的样式选项卡在悬停选项卡上已经具有 CSS 过滤器和不透明度。
CSS 图像悬停效果在元素中工作,或者在任何地方工作的方式相同:元素上的类和规则 :hover。Elementor 特定部分只有您键入类和粘贴 CSS 的位置,以下是您可以复制的五个效果,每个效果都使用标准图像小部件在 Elementor 4.3 上进行测试。
如果您不想触摸代码,最后一部分会显示无代码路线 图像悬停效果小部件.
目录
CSS悬停效果如何在元素器中工作
下面的每个片段都遵循相同的模式。您为 Image 小部件提供一个类,当指针位于该小部件上时,CSS 会更改该小部件内部的图像。
- 选择 Elementor 中的图像小部件。
- 打开 高级 选项卡并找到 CSS 课程.
- 例如,输入没有点的类名称
hover-zoom. - CSS 相匹配的添加到你的站点一次,任何带有该类的图像然后得到效果。
类落在小部件的外部元素上,图片是一个 img 在里面,所以规则是针对的 .hover-zoom img.
CSS 添加地点
您有四个地方可以粘贴 CSS,具体取决于安装的内容。
| 地点 | 需求 | 适用于 |
|---|---|---|
| 小部件、高级、自定义 CSS | 元素专业版 | 那个小部件 |
| 站点设置,自定义 CSS | 元素专业版 | 整个网站 |
| 外观、自定义、附加 CSS | 仅限 WordPress | 整个网站 |
| 自定义 CSS 扩展 | 主插件 | 您将其添加到的元素 |
对于您计划重复使用的课程,全站的地方是更好的家。 自定义 CSS 扩展 page 解释了主插件选项的工作原理。
5 CSS图像悬停效果进行复制
每个效果都有一个类名、CSS 以及悬停之前和期间结果的屏幕截图。
1、在帧内缩放
图像在盒子保持相同大小的情况下放大。类名称: hover-zoom.
.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); }
2。灰度到颜色
Image黑白坐,悬停转为全彩 班级名称: hover-color.
.hover-color img { filter: grayscale(100%); transition: filter 0.4s ease; }
.hover-color:hover img { filter: none; }
3、用影子举起
Xiang象向上移动几个像素, 得到一个柔和的影子, Xiang一张卡片被捡起来 班级名称: hover-lift.
.hover-lift img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18); }
4、暗色叠加
A暗层在图像上淡入, 伪元素搭建, 不需要多加标记 班级名称: hover-dim.
.hover-dim { position: relative; }
.hover-dim::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.hover-dim:hover::after { opacity: 1; }
5、滑上来的标题
Image自己的说明文字隐藏在底部边缘下方,在悬停时向上滑动,在Image小部件中,设置 标题 to 自定义 字幕 先打文本 班级名称: hover-caption.
.hover-caption figure { position: relative; overflow: hidden; margin: 0; }
.hover-caption figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; background: rgba(0, 0, 0, 0.6); color: #fff; transform: translateY(100%); transition: transform 0.35s ease; }
.hover-caption:hover figcaption { transform: translateY(0); }
这个取决于标题是否存在。如果没有标题,Elementor 不会打印图形和无花果标题,并且规则没有什么可移动的。
CSS还是内置的悬停设置?
CSS 之前检查 Elementor 自己的控件,因为这五个效果中有两个作为设置存在。图像小部件的样式选项卡有一个带有不透明度、CSS 过滤器和悬停动画的悬停选项卡。
| 效果 | 内置到 Elementor 中? | 为什么使用CSS |
|---|---|---|
| 灰度到颜色 | 是的,CSS 过滤器,饱和度 | 许多图像的一类 |
| 缩放 | 部分。生长放大超过框架。 | 将变焦保持在帧内 |
| 用影子举起 | 否 | Elementor 没有设置 |
| 深色覆盖层 | 不,在图像小部件上 | 需要,除非您将图像包装在容器中 |
| 滑动标题 | 否 | 除非您使用悬停小部件,否则需要 |
内置设置逐步覆盖 elementor 中如何添加图像悬停效果.一般技术记载于 MDN的页面,用于:悬停伪类.
的无代码路线
CSS适合图片本身的简单效果,一旦你想要一个标题和一个在图像上动画化的描述,CSS就会快速增长,你必须在每次设计更改时都保持它。
Master Addons 中的图像悬停效果小部件用下拉替换它。它有 30 个效果、每个图像的标题和描述以及颜色和类型的样式选项卡控件。
现场观看他们。 的 图像悬停效果小部件页面 有八张卡片可供悬停,还有一张包含所有 30 种效果的表格。
常见问题
如何将 CSS 悬停效果添加到 Elementor 中的图像中?
择"图像小部件,打开"高级选项卡并在CSS类中键入类名。然后为该类添加一个CSS规则,其中包含:hover,例如。hover-zoom:hover img {变换:缩放(1.08);}。将CSS粘贴在Elementor Pro的自定义CSS中或在外观、自定义、附加CSS中。
我在哪里将自定义 CSS 放入没有 Pro 的 Elementor 中?
WordPress仪表板中转到外观,自定义,附加CSS并将其粘贴在那里,CSS加载到每个页面上,因此任何具有匹配类的小部件都会将其拾取。从附加组件中自定义CSS扩展是另一个选项。
为什么我的 CSS 悬停效果在 Elementor 中不起作用?
CSS Classes 字段中键入的点、与 CSS 不匹配的类名或缓存样式表,通常的原因是键入没有点的类,比较拼写,然后在 Tools 下清除你的缓存插件和 Elementor 的文件。
我可以在悬停时进行图像缩放而不会溢出吗?
是的。将溢出设置为隐藏在承载类的小部件上并缩放其内部的 img。小部件保留其大小并剪辑放大的图像。本指南中的第一个片段就是这样做的。
CSS悬停效果在移动端工作吗?
Phone没有悬停状态,所以效果要么永远不会显示,要么在轻按后显示,并一直停留到访客轻按其他地方。将悬停效果视为小屏幕上的装饰,并在没有它们的情况下保持任何重要文本可见。
最后的想法
Elementor中的CSS图像悬停效果,需要图像小部件上的类和一个短规则,这里的五个涵盖了缩放、颜色、升降、覆盖和滑动标题,并且每个都可以通过改变一个或两个值来调整。
当您想要的效果在图像上包含文本时, 图像悬停效果小部件 在不维护 CSS 的情况下让您到达那里。
相关阅读
