如何使用 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 的特色圖片