你想在WordPress中的鼠標懸停時淡化圖像嗎？當用戶將鼠標移到圖像上時，簡單的淡入或淡出動畫可以使您的網站更具吸引力。它還鼓勵訪問者與您的內容互動，這可以讓他們在您的網站上停留更長時間。在本文中，我們將向您展示如何在WordPress中的鼠標懸停上添加淡入淡出的圖像效果。

為什么要在WordPress中的鼠標懸停時淡化圖像？

動畫是使您的網站更有趣的簡單方法，甚至可以將訪問者的注意力吸引到頁面最重要的內容上，例如您的網站徽標或號召性用語。

在WordPress中使用CSS動畫有很多不同的方法，但是為圖像添加懸停效果特別有效。淡入淡出動畫意味著當訪問者將鼠標懸停在圖像上時，您的圖像將緩慢出現或消失。

這鼓勵人們與您的圖像互動，甚至可以向頁面添加講故事的元素。例如，當訪問者在頁面上移動時，不同的圖像可能會淡入淡出。

與其他一些動畫不同，鼠標懸停時的淡入淡出效果很微妙，因此它不會對訪問者的閱讀體驗或您所做的任何圖像優化產生負面影響。

方法1：將鼠標懸停時的圖像淡入淡出添加到所有WordPress圖像

為所有圖像添加淡入淡出效果的最簡單方法是使用 WPCode。這個免費的插件允許您輕松地在WordPress中添加自定義代碼，而無需編輯主題文件。

使用WPCode，即使是初學者也可以編輯其網站的代碼，而不會冒錯誤和拼寫錯誤的風險，從而導致許多常見的WordPress錯誤。

您需要做的第一件事是安裝并激活免費的WPCode插件。

激活后，轉到代碼片段 ? 添加代碼段。

在這里，您將看到可以添加到站點的所有現成的WPCode片段。其中包括一個代碼片段，可讓您完全禁用評論，上傳WordPress通常不支持的文件類型，禁用附件頁面等等。

只需將鼠標懸停在“添加自定義代碼”上，然后在出現時單擊“使用代碼段”。

首先，鍵入自定義代碼段的標題。這可以是幫助您識別WordPress儀表板中代碼段的任何內容。

要將自定義CSS添加到WordPress，請打開“代碼類型”下拉菜單，然后選擇“CSS片段”。

在代碼編輯器中，添加以下代碼片段：

.post img:hover{ opacity : 0.6 ; filter :alpha(opacity= 60 );  /* For IE8 and earlier */ -webkit- transition :  all2 s ease; -moz- transition :  all2 s ease; -ms- transition :  all2 s ease; -o- transition :  all2 s ease; transition :  all2 s ease; }

當用戶將鼠標懸停在每個圖像上時，此代碼片段將淡化每個圖像 2 秒。要使圖像淡入淡出速度較慢，只需將“2s ease”替換為更大的數字即可。如果要使圖片淡出更快，請使用“1s ease”或更小。

您還可以通過更改線條來使“不透明度”更高或更低。opacity:0.6

如果更改這些數字中的任何一個，請確保在所有屬性（webkit、moz、ms 和 o）中更改它們，以便淡入淡出效果在每個瀏覽器上看起來都相同。

如果您對代碼段感到滿意，請滾動到“插入”部分。WPCode可以將您的代碼添加到不同的位置，例如在每個帖子之后，僅前端或僅管理員。

要為所有圖像添加淡入淡出效果，請單擊“自動插入”（如果尚未選擇）。然后，打開“位置”下拉菜單并選擇“站點范圍標題”。

之后，您就可以滾動到屏幕頂部并單擊“非活動”切換，使其更改為“活動”。

最后，單擊“保存代碼段”以使CSS代碼段生效。

現在，如果您將鼠標懸停在WordPress網站上的任何圖像上，您將看到淡入淡出效果。

方法 2：將圖像淡入淡出動畫添加到單個頁面

對每張圖像使用淡入淡出效果可能會分散注意力，特別是如果您正在運行攝影網站、庫存照片商店或任何其他擁有大量圖像的網站。

考慮到這一點，您可能只想在特定頁面或帖子上使用淡入淡出效果。

好消息是WPCode允許您創建自定義短代碼。您可以將此短代碼放在任何頁面上，WordPress只會在該頁面上顯示淡入淡出效果。

為此，只需創建自定義代碼片段并按照上述相同過程添加淡入淡出動畫代碼。然后，單擊“保存代碼段”按鈕。

之后，滾動到“插入”部分，但這次選擇“簡碼”。

這將創建一個簡碼，您可以將其添加到任何頁面、帖子或小部件就緒區域。

之后，繼續按照上述相同的過程使代碼段上線。

您現在可以轉到任何頁面、帖子或小部件就緒區域并創建新的“簡碼”塊。然后，只需將WPCode短代碼粘貼到該塊中即可。

完成后，單擊“更新”或“發布”按鈕以使短代碼生效。然后，您可以訪問該頁面、頁面或小部件就緒區域以查看鼠標懸停時淡入淡出效果。

方法3：將圖像淡入淡出動畫添加到特色圖像

另一種選擇是將淡入淡出動畫添加到您的特色圖像或發布縮略圖。這些是帖子的主要圖像，它們通常出現在主頁、存檔頁面和網站其他重要區域的標題旁邊。

通過在鼠標懸停時淡化特色圖像，您可以使您的網站更加引人注目和引人入勝，而無需對 WordPress 博客或網站上的每張圖像進行動畫處理。

要向帖子縮略圖添加淡入淡出動畫，只需按照上述相同過程創建新的自定義代碼片段即可。

但是，這次，將以下代碼添加到編輯器中：

img.wp-post-image:hover{ opacity : 0.6 ; filter :alpha(opacity= 60 );  /* For IE8 and earlier */ -webkit- transition :  all2 s ease; -moz- transition :  all2 s ease; -ms- transition :  all2 s ease; -o- transition :  all2 s ease; transition :  all2 s ease; }

之后，滾動到“插入”框，然后選擇“自動插入”。

然后，打開“位置”下拉菜單并選擇“站點范圍標題”。

之后，您可以繼續使用上述相同過程使代碼片段生效。

現在，您可以將鼠標懸停在任何特色圖像上以查看淡入淡出動畫的運行情況。

獎勵：為任何圖像、文本、按鈕等制作動畫

淡入淡出效果是使圖像更有趣的一種有趣方式，但是在WordPress中使用動畫的方法還有很多。例如，當訪問者將鼠標懸停在圖像上時，可以使用翻轉框動畫顯示文本或縮放效果，以便用戶可以更詳細地瀏覽圖片。

如果您想嘗試不同的效果，那么 SeedProd 有 40 多種動畫，您可以將其添加到圖像、文本、按鈕、視頻等中。您甚至可以通過單擊幾下來為整個部分和列添加動畫。

在 SeedProd 編輯器中，只需單擊要制作動畫的內容，然后選擇左側菜單中的“高級”選項卡。

然后，您可以繼續并單擊以展開“動畫效果”部分。

之后，只需從“入口動畫”下拉列表中選擇一個動畫，包括各種不同的淡入淡出效果。