เมาส์ชี้แล้วรูปขยาย HTML และ CSS ด้วย transform: scale

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

ตัวอย่าง เมาส์ชี้แล้วรูปขยาย HTML และ CSS ด้วย transform: scale

<style>
	.zoom {
    	width: 400px;
    	height: auto;
    	cursor: pointer;
    	-webkit-transition-property: all;
    	-webkit-transition-duration: 0.3s;
    	-webkit-transition-timing-function: ease;
	}
	.zoom:hover {
    	transform: scale(2);
	}    
</style>

<img class="zoom" src="https://www.devdit.com/chmod/post/images/110910301.png">

เมาส์ชี้แล้วรูปขยาย HTML จากตัวอย่างสร้าง class zoom ใน CSS โดยมีรายละเอียดดังนี้

1. class zoom คือ กำหนดขนาดของรูปภาพเริ่มต้นที่ความกว้าง 400px และความสูงเป็น auto และกำหนดการเคลื่อนไหวด้วยคำสั่ง -webkit-transition-*

2. class zoom:hover คือ เหตุการณ์เมื่อเมาส์ชี้ที่รูป หรือ elements ที่ใช้งาน class zoom กำหนดให้ขยายรูปภาพด้วยคำสั่ง transform: scale(2)

3. ใช้แท็ก img โหลดรูปภาพ และเรียกใช้ class zoom เพื่อให้เกิดเหตุการณ์เมาส์ชี้แล้วรูปขยาย HTML