Hiệu ứng phóng to hình ảnh bằng CSS

Có nhiều cách tạo hiệu ứng phóng to hình ảnh như sử dụng CSS, Javascript hoặc kết hợp cả hai, nhưng nếu bạn không muốn mất nhiều thời gian thì có thể sử dụng một phương pháp đơn giản hơn.

Việc xác định chiều rộng và chiều cao tối đa định trước của một hình ảnh giúp chúng ta giới hạn được chiều rộng và chiều cao tối đa của hình đó một cách dễ dàng. Ví dụ muốn cho hình ảnh lớn không tràn ra ngoài phần nội dung trang web thì chỉ cần định trước chiều rộng tối đa của hình ảnh đó.

Chúng ta có thể tạo ra một lớp (class) và sử dụng nó trong thẻ <img> như sau:

<img class="expa" src="URL_hình ảnh gốc có kích thước lớn" />

Tiếp đến chúng ta định thuộc tính CSS cho hình ảnh:

<style>
img.expa {
cursor: pointer;
max-width: 150px;
}
img.expa:hover {
max-width: none;
}
</style>

Trong phần CSS này chúng ta xác định kích thước tối đa cho hình ảnh hiển thị ban đầu, sau đó khi rê con trỏ vào hình ảnh thì nó được phóng to ra hình ảnh gốc có kích thước lớn.



Ví dụ: Rê con trỏ vào hình ở trên để xem hiệu ứng.