Chia Sẻ Code Zoom Hình Ảnh Khi Rê Chuột

Code zoom – phóng lớn - ảnh cho trang wed là một trong những tiện rất hữu ích cho website. Hôm nay i khám phá xin chia sẽ kỹ thuật này với những thao tác rất đơn giản là copy và paste. Bạn có thể sử dụng với toàn bộ ảnh trên trang web hoặc 1 bài viết cụ thể.

Zoom Ảnh Khi Rê Chuột

Nếu bạn muốn áp dụng cho một bài viết cụ thể, bạn thực hiện như sau:

Bước 1: Copy đoạn code bên dưới

<style type='text/css'>

img {
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}

img:hover {
transform: scale(2,2);
-webkit-transform: scale(2,2);
-moz-transform: scale(2,2);
-o-transform: scale(2,2);
-ms-transform: scale(2,2);
}

</style>

Bước 2: Vào mục đăng bài, mở ở chế độ viết bằng HTML và dán đoạn code bên trên vào trong bài viết. Sau đó bạn chỉnh sửa đăng bài như bình thường và bấm xem kết quả.

Chú ý: 

- transition: all 1s ease: Thời gian để ảnh phóng lớn dần

- transform: scale(2,2):  Tỷ lệ phóng lớn (2 lần). Nếu muốn giãn đều thì tỷ lệ ngang bằng tỷ lệ dọc

Chúc các bạn thành công!

Nguồn: www.ikhampha.com