如何使用 Divi 在悬停时更改图像

知道如何在悬停时更改图像对于您正在处理的任何类型的网站都会派上用场。 此外，它还可以帮助您向页面添加微妙的交互。 例如，您可以使用它为推荐、关于页面和团队页面提供额外的视角。 使用 Divi 的新悬停选项，您可以仅使用内置选项在悬停时更改图像。 通过组合列背景和不透明度过滤器，您很快就会到达那里。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们先看一下我们将从头开始重新创建的四个示例

一般步骤

添加新部分

在本教程的第一部分，我们将介绍一些一般步骤。 这些一般步骤将帮助我们在关注前三个示例时节省时间。 打开一个新页面或现有页面并向其添加常规部分。

添加新行

列结构

然后，使用以下列结构添加新行：

第 1 列背景图像

尚未添加任何模块，打开行设置并将背景图像添加到第一列。 选择要在悬停时显示的图像。

• 第 1 列背景图像重复：无重复

将图像添加到第 1 列

上传图片

继续将图像模块添加到第一列并上传要在悬停前显示的图像。

将标题文本模块添加到第 2 列

添加内容

在第二列中，我们首先需要一个标题文本模块。 继续添加一些 H3 内容。

标题文字设置

然后，转到标题文本设置并进行一些更改。

• 标题 3 字体：Baloo Tamma
• 标题 3 文本颜色：#eda96a
• 标题 3 文字大小：100 像素（桌面）、70 像素（平板电脑）、50 像素（手机）
• 标题 3 字母间距：-4px

• 标题 3 文字阴影水平长度：0.04em
• 标题 3 文字阴影垂直长度：0.04em
• 标题 3 文本阴影颜色：rgba(0,0,0,0.6)

间距

最后，在间距设置中添加一些上边距。

• 上边距：100px（桌面），50px（平板和手机）

将分隔模块添加到第 2 列

显示分隔线

在第 2 列中的标题文本模块正下方添加一个分隔模块。

• 显示分隔线：是

分隔线颜色

接下来更改分隔线颜色。

• 分隔线颜色：#e25300

样式

并在样式设置中选择另一种分隔线样式。

• 分隔线样式：虚线

浆纱

在大小设置中也增加分隔线重量。

• 分隔线重量：3px

将正文模块添加到第 2 列

添加内容

进入最后一个模块！ 将正文文本模块添加到具有一些选择内容的第二列。

文字设置

接下来更改文本设置。

• 文字大小：16px
• 文本行高：2.3em
• 文本方向：对齐

克隆部分两次

完成所有常规步骤后，克隆您构建的部分两次。 现在，我们将为前三个示例中的每一个创建一个单独的部分。

创建示例 #1

将附加设置应用到图像模块

默认不透明度

让我们开始创建第一个示例！ 我们在这里唯一要做的就是创建悬停过渡，没有任何附加效果。 为此，请打开图像模块并转到过滤器设置。 确保默认的不透明度值为 100%。

• 不透明度：100%

悬停不透明度

更改悬停时的不透明度。

• 不透明度：0%

过渡

最后，通过增加过渡持续时间来创建平滑过渡。

• 转换持续时间：1200ms

创建示例 #2

将附加设置应用到图像模块

默认间距

进入第二个例子！ 打开第 1 列中的图像模块并确保那里没有默认的自定义填充。

悬停间距

继续在悬停时添加一些底部填充，以允许悬停图像的大小增加。

• 底部填充：100px

盒子阴影

我们还添加了一个默认的框阴影，它会在悬停时消失。

• 框阴影水平位置：-55px
• 框阴影垂直位置：-50px
• 框阴影传播强度：-10px
• 阴影颜色：#eda96a

默认不透明度

接下来，转到过滤器设置并确保默认不透明度为 100%。

• 不透明度：100%

悬停不透明度

在悬停时删除模块的不透明度。 这将允许显示列背景并创建“悬停图像”效果。

• 不透明度：0%

过渡

最后，在图像模块的过渡设置中增加过渡持续时间。

• 转换持续时间：1200ms

创建示例 #3

将渐变背景添加到第 1 列

对于第三个示例，我们首先打开行设置并向第一列添加径向渐变背景。 这将使悬停时的图像呈圆形。

• 颜色 1：RGBA(43,135,218,0)
• 颜色 2：#ffffff
• 第 1 列渐变类型：径向
• 第 1 列径向：中心
• 第 1 列起始位置：60%
• 第 1 列结束位置：60%

将附加设置应用到图像模块

默认不透明度

继续打开第 1 列中的图像模块并确保默认不透明度为 100%。

• 不透明度：100%

悬停不透明度

移除悬停时的所有不透明度以允许列背景显示出来。

• 不透明度：0%

创建示例 #4

添加新行

列结构

继续最后一个例子！ 在这里，我们需要一个有 6 列的新行。

第 1 列背景图像

尚未添加任何模块，打开行设置并添加您希望悬停时显示的背景图像作为第 1 列背景图像。

• 第 1 列背景图像重复：无重复

对行中的所有列重复

对行中的每一列重复上一步。

浆纱

然后，转到行的大小设置并删除列之间的所有空间。

• 使这一行全宽：是
• 使用自定义装订线宽度：1

将图像模块添加到第 1 列

上传图片

继续将图像模块添加到第一列并上传您希望默认显示的图像。

默认不透明度

确保此模块的默认不透明度为 100%。

• 不透明度：100%

悬停不透明度

并删除悬停时的不透明度以允许显示列背景。

• 不透明度：0%

过渡

增加过渡持续时间以获得平滑过渡。

• 转换持续时间：800ms

克隆图像模块 3 次并在剩余列中放置重复项

完成修改第 1 列中的图像模块后，您可以克隆它并将重复项放置在其余列中。 确保也更改图像。

预览

现在我们已经完成了所有步骤和所有四个示例，让我们最后看看我们创建的所有三个示例。

最后的想法

在悬停时更改图像可以帮助将额外的交互带到推荐部分，关于页面和团队页面。 在本教程中，我们向您展示了一种仅使用 Divi 的内置选项在悬停时实现不同类型图像的简单方法！ 如果您有任何问题或建议，请务必在下方评论区留言！

LovArt/shutterstock.com 的特色图片