寻找一种在您的下一个 Divi 网站上展示图片的酷方法？ 继续阅读，因为在这篇文章中，我们将处理 3 种图像变换悬停效果，这将有助于提升页面的整体外观。 您将能够遵循三个不同示例的 A 到 Z 重新创建过程，甚至可以下载它们以立即使用。 本教程的主要目的是激发您将 Divi 的新转换选项与现有选项相结合，以创建漂亮的网页设计。
让我们开始吧！
预览
在深入学习本教程之前，让我们快速浏览一下所有三个示例在不同屏幕尺寸下的结果。
桌面
示例 #1
示例 #2
示例#3
移动的
示例 #1
示例 #2
示例#3
免费下载图像变换悬停效果
订阅我们的 Youtube 频道
要使用免费的图像变换悬停效果，您首先需要使用下面的按钮下载它们。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
一般步骤
添加新部分
间距
在我们单独重新创建每个示例之前，我们将完成一些一般步骤。 使用以下边距和填充值向您的页面添加一个新的常规部分：
- 上边距：200px
- 底边距：200px
- 顶部填充：0px
- 底部填充：0px
添加新行
立柱结构
继续使用以下列结构添加新行：
第 2 列背景颜色
在不添加任何模块的情况下，打开行设置并为第二列添加背景颜色。
- 第 2 列背景颜色：#efefef
浆纱
接下来进入尺寸设置，让行占据屏幕的整个宽度。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡柱高：是
- 宽度：100%
- 最大宽度：100%
间距
接下来添加以下自定义填充值：
- 顶部填充：0px
- 底部填充：0px
- 第 2 列顶部填充：10vw
- 第 2 列底部填充：10vw
- 第 2 列左填充：5vw
- 第 2 列右填充：5vw
将文本模块 #1 添加到第 2 列
添加H2含量
是时候开始将各种模块添加到第 2 列了，从文本模块开始。 输入您选择的一些 H2 内容。
H2 文本设置
转到设计选项卡并修改 H2 文本设置。
- 标题 2 字体：Times New Roman
- 标题 2 字体粗细：粗体
- 标题 2 文本颜色：#0f47ff
- 标题 2 文字大小：3.5vw
将分隔模块添加到第 2 列
能见度
第二列中我们需要的下一个模块是分隔模块。 确保启用了“显示分隔线”选项。
颜色
然后，转到设计选项卡并更改分隔线颜色。
浆纱
同时修改大小值。
- 分隔线重量：1px
- 宽度：20%
- 模块对齐：左
- 高度：0px
间距
并使用以下顶部和底部边距值为模块创建一些空间：
- 最高边距：1vw
- 底边距：1vw
将文本模块 #2 添加到第 2 列
添加内容
进入下一个模块，这是另一个文本模块。 输入您选择的一些段落内容。
文字设置
转到设计选项卡并更改文本设置。
- 文字字体：Open Sans
- 文字大小：0.7vw（桌面）、1.7vw（平板电脑）、2.5vw（手机）
- 文本行高：1.5vw（桌面）、2.5vw（平板电脑）、3.5vw（手机）
- 文本方向：对齐
浆纱
同时修改大小设置。
- 宽度：61%（桌面）、80%（平板电脑和手机）
间距
并添加一些自定义的顶部和底部边距。
- 最高边距：2vw
- 底边距：2vw
将文本模块 #3 添加到第 3 列
添加内容
在第二列中我们需要的下一个也是最后一个模块，这是另一个文本模块。 我们将通过添加一些段落内容将此模块用作按钮。
添加链接
继续添加指向 CTA 的链接。
文字设置
转到设计选项卡并相应地更改文本设置：
- 文字字体：Times New Roman
- 文字颜色：#ff961e
- 文字大小：1.5vw（桌面）、2.5vw（平板电脑）、3.5vw（手机）
浆纱
在尺寸设置中更改模块的宽度。
间距
然后，转到间距设置并添加一些自定义填充。
- 顶部填充：1vw
- 底部填充：1vw
边界
通过添加具有以下设置的底部边框来完成文本模块：
- 底部边框宽度：1px
- 底部边框颜色：#0f47ff
克隆部分两次
完成自定义部分及其中的所有元素后，您可以继续克隆它两次。 我们将使用页面上的每个部分来重新创建在本文开头共享的三个示例。
重新创建示例 #1
将图像模块添加到第 1 列
将图像框留空
让我们从第一个例子开始吧！ 将新的图像模块添加到第一列并确保将图像框留空。
默认背景颜色
更改图像模块的背景颜色：
- 背景颜色：#0f47ff
悬停背景颜色
修改悬停时的背景颜色。
- 背景颜色：rgba(255,150,30,0.65)
背景图片
我们不会上传图片，而是将一张图片添加到背景中，并附带以下设置：
- 背景图片尺寸：封面
- 背景图像位置：中心
- 背景图像重复：无重复
- 背景图像混合：柔光
间距
转到模块的间距设置并添加一些自定义填充值：
- 在图像下方显示空间：否
- 顶部填充：22vw
- 底部填充：22vw
默认平移旋转
我们还将在悬停时旋转图像。 通过将“0deg”添加到正确的选项，确保图像在悬停之前显示为其原始状态。
悬停平移旋转
在悬停时更改此值：
过渡
为了立即产生效果，我们将删除过渡持续时间：
重新创建示例 #2
将图像模块添加到第 1 列
将图像框留空
继续第二个例子！ 同样，请确保将图像框留空。
默认背景颜色
转到背景设置并添加以下（完全透明）背景颜色：
- 背景颜色：rgba(255,255,255,0)
悬停背景颜色
在悬停时修改此颜色：
- 背景颜色：rgba(0,0,0,0.65)
背景图片
我们再次使用背景图片，而不是将背景图片上传到模块本身。 将背景图像与以下设置相结合：
- 背景图片尺寸：封面
- 背景图像位置：中心
- 背景图像重复：无重复
- 背景图像混合：柔光
间距
然后，转到间距设置并修改顶部和底部填充：
- 在图像下方显示空间：否
- 顶部填充：22vw
- 底部填充：22vw
默认变换比例
确保默认的变换比例值保持为“100%”。
悬停变换比例
并在悬停时更改这些值以创建缩放效果。
默认转换翻译
默认情况下，我们在变换转换设置中为底部选项保留“0px”。
悬停变换翻译
在悬停时修改此值以重新定位元素。
过渡
我们还通过更改高级选项卡中的过渡持续时间来创建稍快的过渡：
- 转换持续时间：200ms
重新创建示例 #3
更改列结构
继续下一个也是最后一个示例！ 首先修改行的列结构。
将图像模块添加到第 1 列
上传 1:1 图片
然后，将图像模块添加到第一列。 与前两个示例相比，我们将上传一个比例为 1:1 的图像（相同的宽度和高度）。
浆纱
转到设计选项卡并在尺寸设置中强制图像为全角。
间距
接下来在间距设置中删除图像下方的空间。
- 在图像下方显示空间：否
默认边框
然后，转到边框设置并在每个角落添加“500vw”。 我们确保此值足够高以涵盖所有屏幕尺寸。
悬停边框
删除您在悬停时添加的圆角。
默认过滤器
然后，转到过滤器设置并确保添加了这些默认值：
- 饱和度：100%
- 亮度：46%
- 不透明度：3%
悬停过滤器
在每个修改后的设置上启用悬停选项并使用以下值：
- 饱和度：300%
- 亮度：46%
- 不透明度：100%
默认变换比例
然后，转到变换选项并修改默认变换比例选项：
悬停变换比例
在悬停时更改这些值。
默认转换翻译
继续转换转换值并确保默认转换转换值保持不变：
悬停变换翻译
修改悬停时的值。
过渡
最后但同样重要的是，增加高级选项卡中的过渡持续时间以创建平滑过渡，您就完成了！
- 转换持续时间：600ms
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
桌面
示例 #1
示例 #2
示例#3
移动的
示例 #1
示例 #2
示例#3
最后的想法
在这篇文章中，我们向您展示了如何使用图像模块和 Divi 的悬停和变换选项来发挥创意。 我们重新创建的效果只是众多美丽可能性中的一小部分。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件通讯和 YouTube 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。
