麥克斯與沃普雷司

Image Scroll on Hover 圖片捲動效果

Image Scroll on Hover 圖片捲動效果

Image Scroll on Hover 圖片捲動效果,透過簡單的 CSS 設計,讓圖片的設計有了新的展示效果,增加訪客的閱讀意願。

WordPress 網站作為最佳內容管理系統,建立圖文並茂的網站內容,一直都是每一位網站管理者或是網頁設計師努力的目標。今天要跟大家分享一點點 CSS 設計語法,讓原本的長度過長的圖片,配合文字排版,可以有不同的展示效果,又不會影響圖片的完整性,這也是很多網站設計經常會被使用到的技巧,有興趣的朋友可以參考看看。

Image Scroll on Hover 圖片捲動效果

1.在文章編輯時,對於圖片長度比較長(直式圖片)再搭配文字後的效果實在不好,所以才有了今天的 CSS 語法分享。

2.請點擊圖片,接著在右側的區塊設定/進階設定,附加的 CSS 類別,這裡可以自建,示範文章是:scrolling-01。

3.文章發佈後,可以在前台先預做檢視,可以看到版面樣式實在不美觀。

4.接下來到外觀/自訂,往下找到附加的 CSS,填上今天分享的 CSS 語法,完成後請發佈就可以。

5.CSS 語法示範。

6.回到網站的前台,原本的版面樣式變化了,與文字搭配起來更協調了,移動滑鼠到圖片時,可以看到圖片上下捲動,展示出完整的圖片資訊。

7.動態影片展示效果。

https://wordpress.blog.tw/images/2023/07/19/20230719-01-1.mp4

結論

與很多剛剛接觸 WordPress 網站架設的朋友分享過,想要建置自己理想的網站,CSS 語法的學習是無可避免的功課。只要是想長久經營網站的朋友,不論是自學或是找人學習,都是非常好的開始,當然也歡迎大家隨時來討論。

Exit mobile version