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

ภาพด้านซ้ายคือภาพก่อนที่เมาส์จะวางอยู่เหนือภาพ ส่วนภาพถัดมาคือภาพที่เมาส์ไปอยู่เหนือภาพแล้ว

ตัวอย่าง CODE

<style>
  img:hover {
      border-radius: 50%;
  }
</style>
<img src="https://picsum.photos/300/300">

สิ่งที่เราทำคือเรากำหนด CSS ให้เปลี่ยน border-radius ของภาพนั้นเอง โดยหากเรากำหนดให้เป็น 50% ภาพทั้ง 4 มุมจะลดรัสมีมาทุกด้าน 50% ทำให้ภาพเป็นวงกลม ถ้าเรากำหนดเป็นค่าอื่นก็จะทำให้ได้รูปอื่นแทนเช่นถ้ากำหนดเป็น 10% ก็จะได้สี่เหลี่ยมขอบมน หากยังดูไม่เข้าใจลองคลิกไปเขียนเองได้ที่นี่

คลิกที่นี่เพื่อลองเขียนด้วยตัวเอง

แน่นอนว่าตัวอย่างแค่นี้ไม่หลากหลาย เราจึงแนะนำให้ไปดูต่อได้ที่นี่ มีตัวอย่างเท่ๆพร้อม CODE ให้สามารถหยิบนำไปใช้ได้แบบง่ายๆ

คลิกเพื่อดูตัวอย่างอื่นๆ