สร้างเอฟเฟ็คซูมภาพ Hover ไม่ล้นกรอบ ด้วย CSS (Image Zoom Effect)

							Copy to clipboard
							
					<style>

/* ============================= */
/* Container ครอบรูป */
/* ============================= */

.img-zoom-hover {
    width: 400px;              /* ปรับขนาดกรอบ */
    height: 260px;

    overflow: hidden;          /* ⭐ สำคัญ: ซูมแล้วไม่ล้นกรอบ */
    position: relative;

    border-radius: 6px;        /* มุมโค้ง (ไม่จำเป็น) */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* ============================= */
/* รูปภาพด้านใน */
/* ============================= */

.img-zoom-hover img {
    width: 100%;
    height: 100%;

    object-fit: cover;         /* ⭐ ภาพเต็มกรอบเสมอ */

    transition: transform 3s ease-out;  /* ⭐ ระยะเวลาการซูม */
    will-change: transform;    /* ⭐ ทำให้ animation ลื่น */
}

/* ============================= */
/* Hover — สั่งให้ซูม */
/* ============================= */

.img-zoom-hover:hover img {
    transform: scale(1.05);    /* ⭐ ระดับการซูม */
}

</style>


<h2>ตัวอย่าง Effect Zoom แบบไม่ล้นกรอบ</h2>

<div class="img-zoom-hover">
    <img src="https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1200" alt="Sample Image">
</div>