如何在WordPress中添加圖像懸停效果(逐步)


想學習如何在WordPress中添加圖像懸停效果嗎?

圖像懸停效果可以使您的網站更具交互性和吸引力。 這樣可以產生更好的第一印象,並改善您在網站上花費的時間。

在本文中,我們將逐步向您展示如何在WordPress中添加圖像懸停效果。

如何在WordPress中添加圖像懸停效果

什麼是圖像懸停效果?

圖像懸停效果使您可以向靜態圖像添加交互式元素,例如動畫,縮放效果,彈出窗口等。

例如,您可能會有翻轉顯示您的價格或投資組合鏈接的圖像。

圖像懸停還為您提供了一種新穎的方式來顯示照片,畫廊和縮略圖。

交互式圖像和懸停元素可以通過多種方式幫助您的網站:

  • 改善訪問者在您的網站上花費的時間
  • 給您創造性的方式向訪問者展示內容
  • 讓您的用戶知道網站元素是可點擊的

如何在WordPress中創建圖像懸停效果

將圖像懸停效果添加到WordPress網站的最好方法是使用WordPress插件。

使用插件,您無需花費時間進行編輯,格式化和添加CSS即可創建圖像效果。 它只是工作。

您可以使用各種插件來創建獨特的圖像懸停效果和動畫。

在本教程中,我們將向您展示添加所需的懸停效果的四種不同方法。

1.在WordPress中添加圖像懸停翻轉框效果

翻轉框是當鼠標懸停在其上方時翻轉的框。

您可以將此動畫添加到圖像中以顯示文本,甚至在懸停時更改圖像。

圖像懸停翻轉框

您可以控製圖像的翻轉方式以及兩側圖像的設計。

如果您是攝影師,則可以使用它來展示您的作品並分離您的作品集。

添加圖像翻轉框效果的最簡單方法是使用WordPress插件。 插件可讓您快速創建和自定義這些效果。

我們建議使用Flipbox – Awesomes Flip Boxes圖片疊加插件。 這是適用於WordPress的最好的翻頁盒和圖像懸停插件。

使用此插件,您可以簡單地向WordPress圖像添加自定義翻轉框效果。

圖像懸停翻轉框插件設置

它帶有數十種不同的動畫效果和預構建的模板。 您甚至可以控制顏色並添加自己的自定義CSS。

有關更多詳細信息,請參見有關如何在WordPress中創建翻轉框覆蓋和懸停的指南。

2.在WordPress中添加圖像縮放和放大效果

圖像縮放效果使您的用戶可以看到普通尺寸的圖像中看不到的細節。

這對於產品教程和具有高細節水平的圖像很有用。

您也可以在在線商店上使用它來添加縮放效果,例如亞馬遜。

圖像縮放放大

向圖像添加圖像縮放和放大效果的最簡單方法是使用WordPress插件。

我們建議使用WP Image Zoom插件。 使用此插件,您可以簡單地為圖像添加縮放和放大效果。

WP Image Zoom插件設置

它還具有一些功能,可讓您選擇變焦鏡頭的形狀,變焦級別等等。

有關更多詳細信息,請參見有關如何在WordPress中為圖像添加放大縮放的指南。

3.在WordPress中添加圖像動畫效果

您可以將各種附加的懸停效果添加到WordPress。

例如,您具有動畫圖像庫,燈箱圖像,比較圖像,文本疊加等。

圖像動畫效果懸停

要添加此類懸停效果,我們建議使用“圖像懸停效果終極”插件。

該插件非常輕巧,因此不會影響您的網站性能和加載速度。 它也非常易於使用。 您可以通過單擊幾下添加獨特的圖像效果。

您需要做的第一件事是安裝並激活Image Hover Effects Ultimate插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

安裝並激活插件後,您需要在WordPress管理員中單擊“ Image Hover”。 這將顯示八種不同的圖像懸停效果,您可以從中選擇。

選擇圖像懸停效果

在本教程中,我們將使用“字幕效果”效果。 這會在鼠標懸停時在圖像上添加動畫文本。

首先,點擊“字幕效果”框。 這將顯示一個菜單,其中包含不同的動畫選項。

圖像懸停動畫創建樣式

找到喜歡的圖像效果後,單擊“創建樣式”。

在彈出框中,命名您的懸停效果並選擇佈局。 您選擇的版面編號與圖像的有序順序匹配。

記住點擊“保存”。

命名新圖像懸停

在下一個屏幕上,您將有各種選項來自定義懸停效果。

但是,我們將保留默認的動畫選項。

懸停動畫設置

如果進行更改,您會看到它們顯示在“預覽”框中。

要更改默認圖像,請將鼠標懸停在圖像上,然後單擊“編輯”選項。

編輯懸停動畫

在此彈出窗口中,您可以更改將在懸停時顯示的標題和描述。

要上傳圖片,請點擊“圖片”標題下方的框,然後上傳或從媒體庫中選擇圖片。

更改圖像懸停圖像

如果您希望圖像將用戶帶到網站上的另一個頁面,則也可以添加鏈接和按鈕文本。

完成後,點擊“提交”。

圖像懸停簡碼

要將圖像添加到您的網站,請在“短代碼”框中復制該短代碼。

然後,打開要顯示圖像的任何頁面,帖子或窗口小部件,然後粘貼簡碼。

粘貼懸停動畫簡碼

確保單擊“發布”或“更新”以保存所做的更改並使圖像懸停效果生效。

4.在WordPress中添加圖像懸停彈出效果

上面的插件將幫助您添加翻轉框,懸停效果,動畫等功能。

如果要添加上面的插件未涵蓋的其他圖像懸停效果怎麼辦?

最好的方法是使用WordPress自定義CSS插件。 這使您可以對圖像進行視覺更改,而無需編輯任何代碼。

您可以手動編輯CSS文件,也可以通過WordPress定制器添加CSS,但是使用插件是最簡單的選擇。

我們建議使用CSS Hero插件。 使用此插件,您無需編寫任何代碼即可在WordPress網站上編輯幾乎所有的CSS樣式。

CSS懸停效果

有各種專門用於圖像的內置CSS效果。

有關安裝插件的更多詳細信息,請參閱有關如何安裝WordPress插件的指南。

安裝插件後,您需要點擊“繼續進行產品激活”按鈕。

激活CSS Hero

這將指導您完成插件激活過程。

激活插件後,您可以開始自定義圖像。

打開包含要製作動畫的圖像的頁面或帖子,然後單擊頁面頂部的“ CSS Hero”。

這將打開編輯器菜單,您可以在其中添加各種不同的CSS效果。

我們將在懸停效果上添加一個圖像彈出窗口。 首先,您需要單擊要編輯的圖像,然後單擊“片段”。

之後,點擊“懸停效果”。

CSS Hero懸停效果

這將顯示不同CSS效果的菜單。 接下來,選擇“ .hvr-pop”效果,然後單擊“應用”。

單擊“保存並發布”,CSS效果將自動應用於您的圖像。

保存圖像懸停更改

我們希望本文能幫助您學習如何在WordPress中添加圖像懸停效果。 您可能還希望查看我們的有關如何優化Web圖像的指南和有關圖像SEO的初學者指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在以下位置找到我們 推特 和Facebook。