Phóng to/Thu nhỏ phần tử khi hover (Zoom/Scale) với CSS

Hiệu ứng zoom khi hover được tạo bằng transform: scale() kết hợp transition để mượt mà.

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  * { box-sizing: border-box; }
  .zoomDiv {
    padding: 50px;
    background-color: yellow;
    transition: transform 0.2s; /* Mượt 0.2 giây */
    width: 200px;
    height: 200px;
    margin: 70px;
    border-radius: 50%; /* Hình tròn */
    border: 4px solid rgb(78, 37, 155);
  }
  .zoomDiv:hover {
    transform: scale(1.5); /* Phóng to 1.5 lần */
  }
</style>
</head>
<body>
<h1>Zoom on Hover Example</h1>
<h2>Di chuột qua hình tròn vàng để xem phóng to</h2>
<div class="zoomDiv"></div>
</body>
</html>

Giải thích

• transition: transform 0.2s - Chỉ animate transform, không animate các thuộc tính khác (tối ưu hiệu năng)
• transform: scale(1.5) - Phóng to 150%, tâm ở trung tâm phần tử
• transform-origin - Mặc định center center, có thể đổi: transform-origin: top left

Các biến thể hữu ích

/* Phóng to từ góc trên trái */
.zoomDiv:hover { transform-origin: top left; transform: scale(1.5); }

/* Phóng to chỉ chiều ngang */
.zoomDiv:hover { transform: scaleX(1.5); }

/* Phóng to chỉ chiều dọc */
.zoomDiv:hover { transform: scaleY(1.5); }

/* Kết hợp xoay + phóng to */
.zoomDiv:hover { transform: scale(1.2) rotate(5deg); }

Lưu ý hiệu năng

transform và opacity là 2 thuộc tính duy nhất được GPU accelerate (không trigger layout/repaint). Luôn ưu tiên dùng chúng cho animation.