如何在 Divi 中将悬停效果与 CSS 视差背景相结合

在 Divi 中使用带有背景图像的 CSS 视差使我们能够创建出奇独特的悬停效果。 视差是我们可以为网站增添活力的众多方式之一。 当将视差与 Divi 的大量悬停选项相结合时，我们将内容变得更加生动。

在本教程中，我们将向您展示如何在 Divi 中快速轻松地设计独特的 CSS 视差背景悬停效果。 无需插件或自定义编码！

让我们开始吧。

抢先看

这是我们将在本教程中设计的 css 视差背景悬停效果的快速浏览。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

你需要什么开始

首先，您需要具备以下条件：

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）
3. 用于模拟内容的图像

之后，您将有一个空白画布开始在 Divi 中进行设计。

第 1 部分：在 Divi 中创建突围视差悬停效果

首先，创建一个具有一列行的常规部分。

在添加模块之前，打开部分设置并使用 CSS 视差添加背景图像。

确保图像宽度至少为 1920 像素。 该设计适用于具有大量纹理的较暗背景图像。 我正在使用 Divi Builder 提供的 Coffee Shop Layout Pack 中的一个。

然后向该部分添加一些填充，如下所示：

填充物：10vw 顶部，10vw 底部

添加模糊模块

一旦部分背景和填充就位，向行添加一个模糊模块。

然后用几句话的正文更新简介内容。 您可以在那里保留默认标题。

然后单击以使用图标并为宣传语选择咖啡图标。

内容准备好后，更新设计设置如下：

图标颜色：#ffffff
图标字体大小：50px
文本对齐：居中
标题字体：Oswald
标题字体样式 TT
标题文字颜色：#ffffff
标题字母间距：2px
正文字体：Nunito
正文颜色：#ffffff
正文字母间距：1px
填充：顶部 30 像素，底部 30 像素，左侧 30 像素，右侧 30 像素

调整行宽

设计完简介后，跳转到行设置并调整最大宽度。

最大宽度：80%

列设置

对于本示例，我们将在列级别激活悬停效果。 这允许您使用多个模块来构建内容，即使我们现在只使用一个模糊模块。

为了使这种视差悬停效果起作用，我们需要将相同的背景图像添加到我们在我们的部分中使用的列中。 我们还需要在列背景图像上使用相同的 CSS 视差方法。

打开列设置并使用 CSS 视差添加相同的背景图像。

您将看不到列背景图像和部分背景图像之间的任何区别，因为它们都使用 CSS 视差，这基本上将图像固定在网页上的完全相同的位置。 但是，一旦悬停效果就位，您就会看到差异。

继续更新柱设计设置如下：

填充：4vw 顶部，4vw 底部
圆角：10px

然后为该列提供一个仅在悬停时显示的框阴影，如下所示：

盒子阴影：见截图
框阴影垂直位置：0px
框阴影模糊强度：36px
阴影颜色（默认）：rgba(0,0,0,0)
阴影颜色（悬停）：rgba(0,0,0,0.72)

现在让我们转到变换选项并在悬停时更新以下变换样式：

变换比例（悬停）：105%

这将稍微放大列（及其内容）以创建稍微弹出背景图像的效果。

变换平移 Y 轴（悬停）：-2.5%

这会在悬停时稍微向上移动列以创建轻微的不对称位移。

变换原点：100% 50%（底部中心）

这从底部中心原点开始缩放效果，当与平移值结合时，类似于微妙的铰链效果。

到目前为止，这是 css 视差悬停效果。

现在打开行设置并复制该列两次以创建总共三列，每列都具有相同的模糊和悬停效果。

最后结果

这是最终的设计。 请注意在向下滚动页面时默认情况下如何隐藏视差背景图像。 然后当它们弹出时悬停在每一列上时它们就会出现。 在将鼠标悬停在列上向下滚动页面时，您还可以看到视差仍然在列上起作用。 这是一种微妙但极其独特的悬停效果。

为悬停效果添加旋转

我们还可以为 css 视差悬停效果添加旋转，这为设计增添了很好的触感。 只需打开每个列设置并更新以下内容：

变换旋转 Z 轴（悬停时）：5deg

如果你想混合，你可以给中间列一个-5度的旋转。

这是最终结果。

这是相同的设计，背景图像较浅，文字较深。

第 2 部分：在 Divi 中创建放大镜视差悬停效果

复制第一个设计中的部分，然后打开部分设置并用新的背景图像替换背景图像。 我正在使用我们的 Video Game Layout Pack 中的一个，因为它确实突出了放大视差悬停效果。

更新行设置

我们将需要一些额外的空间用于此设计，因此打开行设置并更新以下内容：

天沟宽度：1
宽度：100%
最大宽度：98%

之后，跳转到内容选项卡并删除两列，只剩下一列。

列设置

对于这个设计，我们需要在模块级别而不是列级别应用悬停效果，因此我们需要重置列的默认样式。 为此，请右键单击列项目并选择“重置项目样式”。

更新模糊模块

栏目设置恢复为默认样式后，打开blurb模块设置，添加与栏目相同的css视差背景图片。

浆纱

为了创建一个圆形模块，首先我们需要给它一个匹配的宽度和高度，如下所示：

宽度：300px
模块对齐：居中
高度：300px

边界

为了完成圆形效果，我们需要更新圆角并给它一个轻微的边框。

圆角：50%
边框宽度：1px
边框颜色：rgba(255,255,255,0.12)

框阴影悬停效果

接下来，在悬停时给模糊效果一个框阴影，如下所示：

盒子阴影：见截图
框阴影模糊强度：36px
阴影颜色（默认）：rgba(0,0,0,0)
阴影颜色（悬停）：rgba(0,0,0,0.7)

变换悬停效果

框阴影到位后，按如下方式更新变换选项：

变换原点（默认）：50% 0%（左中）

这将确保简介在放置在三列行的最左侧后不会延伸到页面之外。

变换比例（悬停）：130%

这将放大模糊并真正放大视差背景图像以获得酷炫的悬停效果。

复制列

完成简介后，我们可以复制该列以创建三列，每列都具有相同的简介模块。

打开行设置并将列复制两次，总共三列。

更新变换原点

由于我们的简介模块都将变换原点设置为“左中心”，因此我们需要针对中心和右列中的简介进行调整，以便它们从适当的位置进行缩放。

打开第 2 列中的模糊模块设置并更新以下内容：

变换原点：50% 50%（中心居中）

然后打开第 3 列中的模糊模块的设置并更新以下内容：

变换原点：50% 100%（中右）

最后结果

现在看看最终的结果。 请注意效果如何真正放大了模糊背后的 css 视差背景图像。 当您将鼠标悬停在宣传栏上向下滚动时，它看起来就像放大镜的效果。

事实上，这太酷了，我们可能希望将其保留为默认样式，而不仅仅是处于悬停状态。

最后的想法

我希望这篇文章中的例子能让你的创意源源不断，这样你就可以探索更酷的设计和悬停效果，以结合 css 视差。 设置过程非常简单，但可能性似乎无穷无尽。

我期待在评论中收到您的来信。

干杯!