Devdit
 

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

2.9K

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

แก้ไข 1 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ