如何在WordPress的Mouseover上淡化圖像


圖片可以增加用戶在網站上的參與度。 這就是為什麼您需要優化圖像,學習如何添加精美的圖像庫以及修復網站上的任何圖像問題的原因。 有很多方法可以使您的圖像脫穎而出。 其中之一是對圖像使用淡入淡出效果。 在本文中,我們將向您展示如何在WordPress的鼠標懸停時淡化圖像。

基本上,當用戶將鼠標移到您網站上的圖片上時,該圖片會稍微消失。 請參見下面的示例屏幕截圖:

圖像淡入淡出效果

首先,我們將向您展示如何在WordPress帖子中的圖像上添加簡單的淡入淡出效果。 我們將為此使用CSS。 您需要做的就是將以下代碼複製並粘貼到主題或子主題的 style.css 文件。

.post img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}

該CSS代碼段將影響WordPress帖子中顯示的所有圖像。 但是,此代碼片段中有一些小故障。 當用戶將鼠標移到圖像上時,它會立即切換不透明度。 感覺有點不對吧? 通過添加CSS過渡規則,讓它更加平滑。

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

您還可以通過為圖像設置較低的默認不透明度,然後減弱為完全不透明度以產生髮光效果,來反轉此效果。 您所需要做的就是在樣式表中使用以下CSS:

.post img {
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
.post img:hover{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

我們的某些用戶可能不希望將此效果添加到其帖子中的所有圖像上。 只是精選圖片或發布縮略圖怎麼樣? 要將此效果僅添加到帖子縮略圖中,可以使用默認設置 .wp-post-image WordPress為特色圖片生成的類。 只需更換 .post img:hoverimg.wp-post-image:hover

您可以調整不透明度值或過渡延遲時間以獲得所需的效果。 我們希望本文能幫助您學習如何在WordPress的鼠標懸停時淡化圖像。 在下面的評論中留下您的反饋和問題,讓我們知道您的想法。 別忘了跟隨我們 推特