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

ตัวอย่าง CODE
<style> img:hover { border-radius: 50%; } </style> <img src="https://picsum.photos/300/300">
สิ่งที่เราทำคือเรากำหนด CSS ให้เปลี่ยน border-radius ของภาพนั้นเอง โดยหากเรากำหนดให้เป็น 50% ภาพทั้ง 4 มุมจะลดรัสมีมาทุกด้าน 50% ทำให้ภาพเป็นวงกลม ถ้าเรากำหนดเป็นค่าอื่นก็จะทำให้ได้รูปอื่นแทนเช่นถ้ากำหนดเป็น 10% ก็จะได้สี่เหลี่ยมขอบมน หากยังดูไม่เข้าใจลองคลิกไปเขียนเองได้ที่นี่
คลิกที่นี่เพื่อลองเขียนด้วยตัวเอง
แน่นอนว่าตัวอย่างแค่นี้ไม่หลากหลาย เราจึงแนะนำให้ไปดูต่อได้ที่นี่ มีตัวอย่างเท่ๆพร้อม CODE ให้สามารถหยิบนำไปใช้ได้แบบง่ายๆ