CSS ซูมภาพ เมื่อนำเมาส์ไปวาง ด้วย hover และ transform

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

ตัวอย่าง CSS ซูมภาพ เมื่อนำเมาส์ไปวาง ด้วย hover และ transform

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

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

CSS ซูมภาพ เมื่อนำเมาส์ไปวาง ด้วย hover และ transform มีรายละเอียดดังนี้

1. .zoom_img คือ class สำหรับกำหนดความกว้างของรูปภาพของแท็ก img พร้อมกับกำหนดการเปลี่ยนรูปร่างของ elements ด้วย -webkit-transition-*

2. .zoom_img:hover คือ class ของเหตุการณ์เมื่อผู้ใช้งานนำเมาส์มาวางไว้บน element zoom_img จากตัวอย่าง transform: scale(1.5) เป็นการซูมรูปภาพ

3. นำ .zoom_img ไปใช้กับแท็ก img ของ HTML