HTML เมาส์ชี้รูปใหญ่ขึ้น ด้วย transform และ hover

HTML เมาส์ชี้รูปใหญ่ขึ้น ด้วย transform และ hover บทความนี้สอนการใช้คำสั่ง hover สร้างเหตุกการณ์เมื่อนำเมาส์ชี้รูปภาพ และกำหนดให้รูปภาพขยายใหญ่ขึ้นด้วย transform สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง HTML เมาส์ชี้รูปใหญ่ขึ้น ด้วย transform และ hover

<style>
	.thumbnail {
    	width: 400px;
    	cursor: pointer;
	}
	.thumbnail:hover {
    	transform: scale(2);
	}    
</style>

<img class="thumbnail" src="https://www.devdit.com/chmod/post/images/200525651212.jpg">

HTML เมาส์ชี้รูปใหญ่ขึ้น จากตัวอย่างโค้ดใช้คำสั่ง hover สร้างเหตุการณ์เมื่อผู้ใช้งานเมาส์ชี้รูปภาพ หรือ elements จากนั้นใช้คำสั่ง transform: scale(2) เพื่อขยายให้รูปภาพใหญ่ขึ้น ด้วย CSS ร่วมกับ HTML