วิธีเพิ่มเอฟเฟกต์เมื่อนำเมาส์ไปชี้ที่รูปภาพใน WordPress (5 วิธีง่ายๆ)

การเพิ่มเอฟเฟ็กต์เมื่อวางเมาส์เหนือภาพหรือปุ่มลงในเว็บไซต์อาจดูเหมือนเป็นรายละเอียดเล็กน้อย แต่สามารถช่วยเพิ่มความสวยงามและการใช้งานของเว็บไซต์ได้ เมื่อผู้เข้าชมวางเมาส์เหนือภาพหรือปุ่มแล้วเห็นการเปลี่ยนแปลงเล็กน้อย นั่นเป็นการส่งสัญญาณว่าองค์ประกอบนั้นเป็นแบบโต้ตอบได้. 

การเคลื่อนไหวเล็กๆ น้อยๆ นี้จะช่วยเพิ่มการมีส่วนร่วมและลดอัตราการออกจากเว็บไซต์ เอฟเฟกต์การวางเมาส์เหนือภาพมีประโยชน์อย่างยิ่งในอีคอมเมิร์ซ ช่วยให้ผู้ซื้อสามารถดูตัวอย่างสินค้าได้ใกล้ชิดยิ่งขึ้น กระตุ้นให้พวกเขาสนใจและดำเนินการชำระเงินต่อไป

มีหลายวิธีในการเพิ่มเอฟเฟกต์การวางเมาส์เหนือภาพใน WordPress ตั้งแต่การเฟดแบบง่ายๆ ไปจนถึงแอนิเมชั่นพลิกภาพที่ดึงดูดสายตา ด้านล่างนี้ คุณจะพบวิธีการเริ่มต้นใช้งานหลายวิธี!

วิธีเพิ่มเอฟเฟ็กต์การวางเมาส์เหนือรูปภาพใน WordPress

ในบทความนี้ เรารวบรวม 5 วิธีง่ายๆ ในการเพิ่มเอฟเฟกต์เมื่อนำเมาส์ไปชี้ (hover effects) ให้กับเว็บไซต์ของคุณ เลือกวิธีที่เหมาะกับคุณที่สุดได้เลย!

วิธีที่ 1: การใช้ปลั๊กอิน

ปลั๊กอินจะช่วยประหยัดเวลาและความพยายามของคุณได้มาก โดยเฉพาะอย่างยิ่งหากคุณต้องการใช้เอฟเฟ็กต์การวางเมาส์เหนือองค์ประกอบหลายแบบในเว็บไซต์เดียวกัน

ตัวอย่างเช่น หากคุณมีแกลเลอรีรูปภาพหลายแห่ง คุณสามารถใช้แอนิเมชันที่แตกต่างกันกับแต่ละแห่งได้ เช่น การซูมแบบง่ายๆ สำหรับภาพขนาดย่อของบทความ หรือเอฟเฟ็กต์พลิกภาพสำหรับภาพสินค้า

การใช้ปลั๊กอินอย่าง Image Hover Effects Ultimate จะทำให้กระบวนการนี้ง่ายขึ้นมาก ปลั๊กอินนี้ใช้งานได้ฟรีสำหรับทุกคนและมีเอฟเฟ็กต์หลากหลายสำหรับแต่ละองค์ประกอบ เริ่มต้นใช้งานได้ง่ายๆ โดยติดตั้งตามคำแนะนำด้านล่าง: 

การติดตั้งปลั๊กอิน

• เปิดหน้าผู้ดูแลระบบ WordPress ของคุณ.
• คลิก " เพิ่มปลั๊กอิน" จาก "ปลั๊กอิน" ในแถบด้านข้าง

• พิมพ์ Image Hover Effects Ultimate ลงในช่องค้นหา

• เลือกผลลัพธ์แรกแล้วคลิก ติดตั้งทันที เพื่อเริ่มการดาวน์โหลด
• เมื่อการติดตั้งเสร็จสมบูรณ์แล้ว ให้คลิก Activate เพื่อเริ่มใช้งานปลั๊กอิน

การใช้งานปลั๊กอิน Image Hover Effects สำหรับ WordPress

• เมื่อติดตั้งปลั๊กอินเสร็จแล้ว คุณจะเห็น แสดงภาพเมื่อนำเมาส์ไปชี้ (Image Hover ในแดชบอร์ดของคุณ

• คลิกที่เมนูเพื่อเปิดการตั้งค่าปลั๊กอิน. 

• เลือกเอฟเฟ็กต์ที่คุณต้องการใช้ สำหรับบทเรียนนี้ เราจะทดลองใช้ เอฟเฟ็กต์ขยายภาพ (Image Magnifier )
• หลังจากเลือกเอฟเฟ็กต์แล้ว คุณจะเห็นรูปแบบแอนิเมชั่นหลากหลายแบบ.

เมื่อคุณพบสไตล์ที่ถูกใจแล้ว ให้คลิก สร้าง สไตล์

• หน้าต่างป๊อปอัพจะปรากฏขึ้น ป้อนชื่อเรื่องใน ชื่อ และเลือกเอฟเฟกต์จากเลย์เอาต์ (ลำดับที่ 1, 2 หรือ 3) จากนั้นคลิก บันทึก เพื่อดำเนินการต่อ
• คุณจะถูกนำไปยังหน้าใหม่ที่คุณสามารถปรับแต่งการตั้งค่าต่างๆ เช่น ความสูง ความกว้าง และความโปร่งใส ลองปรับแต่งดูว่าแบบไหนดูดีที่สุด.

• เมื่อคุณพอใจกับการตั้งค่าแล้ว ให้คลิก แก้ไข เพื่อปรับแต่งรูปภาพของคุณ

• จะมีหน้าต่างป๊อปอัพปรากฏขึ้นอีกอันหนึ่ง ในหน้าต่างนี้คุณสามารถปรับแต่งตำแหน่งการขยายภาพได้. 

• คุณสามารถเปลี่ยนรูปภาพได้โดยใช้ ปุ่ม " เลือกรูปภาพ
• หลังจากตั้งค่าทุกอย่างเสร็จแล้ว ให้คลิก ส่ง เพื่อบันทึกเอฟเฟกต์การวางเมาส์เหนือภาพ

• หากต้องการใช้เอฟเฟ็กต์นี้กับเว็บไซต์ของคุณ ให้คัดลอกและวางชอร์ตโค้ดลงในโพสต์หรือหน้าเว็บของคุณ. 

• ตอนนี้เอฟเฟ็กต์การวางเมาส์เหนือรูปภาพแบบง่ายๆ ของคุณพร้อมใช้งานแล้วในทุกส่วนของเว็บไซต์ของคุณ. 

วิธีที่ 2: การใช้ CSS

คุณไม่จำเป็นต้องติดตั้งปลั๊กอินใดๆ สำหรับวิธีนี้ คุณสามารถเพิ่มเอฟเฟ็กต์การวางเมาส์เหนือองค์ประกอบต่างๆ ให้กับธีมของคุณได้โดยใช้ CSS แบบกำหนดเอง.

เราจะเริ่มต้นด้วยสิ่งง่ายๆ ก่อน เช่น เอฟเฟ็กต์เส้นขีดใต้เมื่อวางเมาส์เหนือองค์ประกอบ หากคุณต้องการเพิ่มเอฟเฟ็กต์นี้ลงในธีมของคุณ ให้ทำตามขั้นตอนง่ายๆ ด้านล่างนี้:

• ไปยังโพสต์ที่คุณต้องการเพิ่มเอฟเฟ็กต์เมื่อวางเมาส์เหนือโพสต์นั้น.
• เพิ่มรูปภาพโดยคลิกที่ "ปก" จาก เครื่องหมาย +

• ใส่เนื้อหาของคุณลงใน "หน้าปก" ตรงนี้เราจะเพิ่มชื่อเรื่องและปุ่มให้

• ตั้งค่าแบบอักษรและรูปแบบตามที่คุณต้องการ.
• บันทึกหน้านี้เป็นแบบร่าง.
• ถัดไป ไปที่ "ลักษณะที่ปรากฏ" ในแดชบอร์ดของคุณ

• จากนั้น คลิก ปรับแต่ง แล้วไปที่ CSS เพิ่มเติม เพิ่มโค้ดต่อไปนี้:

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• คลิกปุ่ม "เผยแพร่" เพื่อบันทึกโค้ด

• ตอนนี้กลับไปที่โพสต์ของคุณแล้วเลือกข้อความที่คุณต้องการใส่เส้นใต้.
• เปิด "ขั้นสูง" ในแถบด้านข้างของบล็อก แล้วป้อน "underline-hover" ใน ช่อง "คลาส CSS เพิ่มเติม"

• บันทึกหน้าเว็บและดูตัวอย่างเพื่อดูผลลัพธ์. 

มีเอฟเฟ็กต์การวางเมาส์เหนือองค์ประกอบให้เลือกมากมาย ดังนั้นเลือกอันที่เหมาะกับสไตล์ของคุณที่สุด คุณสามารถเรียนรู้วิธีเขียน CSS ด้วยตัวเอง หรือค้นหาตัวอย่างจากชุมชน WordPress ก็ได้ มีให้เลือกมากมาย!

วิธีที่ 3: การใช้โปรแกรมสร้างหน้าเว็บ (เช่น Elementor)

โปรแกรมสร้างเว็บไซต์อย่าง Elementor ช่วยให้คุณสร้างเว็บไซต์ได้อย่างสร้างสรรค์ มีเอฟเฟ็กต์เมื่อนำเมาส์ไปชี้ (hover effects) ที่พร้อมใช้งานได้ทันที เพื่อเพิ่มสีสันให้เว็บไซต์ของคุณโดยไม่ต้องเขียนโค้ดใดๆ.

คุณยังสามารถใช้มันเพื่อสร้างเอฟเฟกต์เมื่อนำภาพไปวางเหนือภาพใน WordPress ได้อีกด้วย ในส่วนนี้ เราจะทดลองใช้เอฟเฟกต์เมื่อนำภาพไปวางเหนือภาพที่มีอยู่ในตัวสร้างหน้าเว็บเอง.

วิธีการตั้งค่าเอฟเฟกต์:

• เปิด Elementor จากแดชบอร์ดผู้ดูแลระบบ
• เพิ่มรูปภาพของคุณ.

• เลือกรูปภาพของคุณ จากนั้นไปที่ แท็บ "สไตล์
• เลื่อนลงมาแล้วคลิก เมาส์เหนือ" (Hover )

• ใน "แอนิเมชั่นเมื่อวางเมาส์เหนือวัตถุ" คุณจะพบเอฟเฟ็กต์สำเร็จรูปหลากหลายแบบ

• ในที่นี้เราเลือก Grow เป็นตัวอย่าง คุณสามารถปรับแต่งระยะเวลาการเปลี่ยนภาพ ความโปร่งใส และการตั้งค่าอื่นๆ ให้เข้ากับการออกแบบเว็บไซต์ของคุณได้

• หลังจากทำเสร็จแล้ว คุณจะเห็นผลลัพธ์ได้ทันทีโดยไม่ต้องดูตัวอย่างก่อน. 

วิธีที่ 4: การใช้ปลั๊กอิน Flipbox

หากคุณกำลังมองหาทางลัด คุณสามารถติดตั้งปลั๊กอิน Flipbox ได้ เอฟเฟ็กต์ Flipbox คือเอฟเฟ็กต์ที่ภาพจะพลิกเพื่อแสดงเนื้อหาด้านหน้าหรือด้านหลังเมื่อคุณเลื่อนเมาส์ไปวางเหนือภาพนั้น.

เอฟเฟ็กต์นี้เหมาะอย่างยิ่งสำหรับภาพถ่าย โดยคุณสามารถแสดงภาพถ่ายไว้ด้านหน้าและรายละเอียดของกล้องไว้ด้านหลังได้ แต่ความเป็นไปได้นั้นไม่มีที่สิ้นสุด.

• จากหน้าแดชบอร์ด WordPress ของคุณ ให้คลิกที่ ปลั๊กอิน จากนั้นเลือก เพิ่ม ปลั๊กอิน
• พิมพ์ Flipbox - Awesome Flip Boxes Image Overlay ลงในช่องค้นหา

• คลิก ติดตั้งทันที จากนั้น เปิดใช้งาน ปลั๊กอิน

• ในการสร้างฟลิปบ็อกซ์ ให้ไปที่ ฟลิปบ็อกซ์ แล้วคลิก สร้าง ใหม่
• เลือกแอนิเมชั่นที่คุณชอบได้เลย เมื่อเลือกได้แล้ว ให้คลิก สร้าง สไตล์

• หน้าต่างป๊อปอัพจะปรากฏขึ้น เลือกรูปแบบที่ต้องการ (ลำดับที่ 1, 2 หรือ 3) และป้อนชื่อเรื่อง. 

• คลิก บันทึก เพื่อดำเนินการต่อ
• ถัดไป คุณจะถูกนำไปยังเมนูการปรับแต่ง ซึ่งคุณสามารถตั้งค่าเอฟเฟกต์และเพิ่มเนื้อหาของคุณได้.

• เลื่อนลงมาเพื่อหา แสดงตัวอย่าง " คลิก "แก้ไข" เพื่อปรับแต่งเนื้อหาทั้งด้านหน้าและด้านหลังของกล่องพลิก

• เมื่อเสร็จแล้ว ให้คลิก ส่ง เพื่อบันทึก

• หากต้องการเพิ่มกล่องพลิกนี้ลงในหน้าเว็บของคุณ เพียงคัดลอกและวางชอร์ตโค้ดที่สร้างขึ้นลงในส่วนใดก็ได้ของเว็บไซต์ของคุณ. 

• และนี่ก็คือผลงานที่เสร็จสมบูรณ์! 

วิธีที่ 5: การใช้บล็อกของกูเทนเบิร์ก

Gutenberg คือตัวแก้ไขบล็อกเริ่มต้นของ WordPress ที่ช่วยให้คุณสามารถเพิ่มเอฟเฟกต์เมื่อนำเมาส์ไปชี้ (hover effects) ได้โดยตรงภายในตัวแก้ไข.

แม้ว่าจะไม่มีเอฟเฟกต์การวางเมาส์เหนือวัตถุที่ซับซ้อน แต่คุณสามารถปรับปรุงแอนิเมชั่นได้โดยใช้ CSS แบบกำหนดเอง.

ตัวอย่างเช่น เรามาสร้างเอฟเฟ็กต์เฟดแบบง่ายๆ เมื่อวางเมาส์เหนือวัตถุ นี่คือขั้นตอนทีละขั้น:

• ไปยังโพสต์หรือหน้าเว็บที่คุณต้องการเพิ่มเอฟเฟ็กต์เมื่อวางเมาส์เหนือโพสต์นั้น.
• คลิกเครื่องหมาย + เพื่อเพิ่มบล็อกใหม่ จากนั้นเลือก บล็อก Cover

• ภายใน หน้าปก ให้เพิ่ม บล็อก ย่อหน้าเข้าไป

• กรอกชื่อเรื่องและคำอธิบายสั้นๆ.
• ปรับแต่งขนาดตัวอักษร ความโปร่งใส การจัดแนว และสีได้ตามต้องการ.

• จากนั้นเลือก Cover เพื่อเพิ่มคลาส CSS แบบกำหนดเอง
• เปิด "ขั้นสูง" ในแถบด้านข้างทางขวา
• ป้อน fade-hover-effect ใน ช่อง Additional CSS Class

• หลังจากนั้น ให้บันทึกหน้าเว็บเป็นฉบับร่าง.

• ไปที่ ปลั๊กอิน แล้วเลือกปลั๊กอินโค้ดที่คุณต้องการ ในตัวอย่างนี้ เรา ใช้ WPCode
• สร้างส่วนย่อย CSS ใหม่ จากนั้นวางโค้ดต่อไปนี้ลงไป:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• บันทึกโค้ดส่วนนี้แล้วเปิดใช้งาน.
• ตอนนี้ ลองดูตัวอย่างหน้าเว็บของคุณเพื่อดูเอฟเฟกต์การเฟดเมื่อนำเมาส์ไปชี้ (hover fade) ในการทำงานจริง.

คุณสามารถนำเอฟเฟกต์นี้กลับมาใช้ใหม่ได้โดยการเพิ่มคลาส fade-hover-effect ให้กับบล็อกหรือรูปภาพใดๆ ก็ได้ แต่ถ้าคุณมีรูปภาพจำนวนมาก ลองใช้ปลั๊กอินอย่าง WP Media Folder เพื่อจัดระเบียบคลังสื่อของคุณเป็นโฟลเดอร์ วิธีนี้จะช่วยให้ค้นหาและนำเนื้อหาที่เกี่ยวข้องกลับมาใช้ใหม่ได้ง่ายขึ้น

การใช้เอฟเฟ็กต์มากเกินไปส่งผลต่อประสิทธิภาพหรือไม่?

ใช่แล้ว การใช้เอฟเฟ็กต์เมื่อวางเมาส์เหนือวัตถุมากเกินไปในเว็บไซต์ของคุณอาจส่งผลต่อประสิทธิภาพการทำงาน โดยเฉพาะอย่างยิ่งหากไม่ได้ปรับแต่งอย่างเหมาะสม เนื่องจากเอฟเฟ็กต์บางอย่างต้องการ CSS เพิ่มเติม ซึ่งขนาดของ CSS ของเว็บไซต์อาจเพิ่มขึ้นและทำให้เวลาในการโหลดหน้าเว็บช้าลง.

ควรใช้เฉพาะเอฟเฟกต์การวางเมาส์เหนือวัตถุที่จำเป็นเท่านั้น เพื่อเพิ่มประสบการณ์การใช้งานของผู้ใช้โดยไม่ทำให้เว็บไซต์ของคุณดูรกเกินไป.

สรุป

การเรียนรู้วิธีเพิ่มเอฟเฟ็กต์เมื่อนำภาพไปวางเหนือภาพใน WordPress จะช่วยเพิ่มประสิทธิภาพของเว็บไซต์ของคุณโดยการเพิ่มปฏิสัมพันธ์กับผู้ใช้และดึงดูดความสนใจของพวกเขาให้มากขึ้น.

มีวิธีการเพิ่มเอฟเฟกต์เมื่อวางเมาส์เหนือองค์ประกอบได้หลากหลายวิธี ไม่ว่าจะเป็นผ่านปลั๊กอิน CSS แบบกำหนดเอง หรือโปรแกรมสร้างหน้าเว็บ คุณจึงมีอิสระในการเลือกสิ่งที่เหมาะสมที่สุดสำหรับเว็บไซต์ของคุณ ลองทดลองใช้สไตล์ต่างๆ เพื่อค้นหาสไตล์ที่เข้ากับเว็บไซต์ของคุณมากที่สุด!