Code đơn giản Zoom ảnh bằng CSS3

Zoom ảnh có nhiều cách, trong đó chủ yếu dựa vào CSS3 hoặc Jquery và đôi khi là cả hai.

Nếu xài Jquery bạn có các hiệu ứng zoom rất đẹp (thí dụ như Cloud Zoom), xài CSS3 thì hiệu ứng tuy không bằng nhưng bù lại code rất đơn giản – miễn phí và không đòi hỏi tải thư viện khá nặng có thể làm chậm đi tốc độ lướt web.

Chúng ta sẽ áp dụng 2 thuộc tính của CSS3:

• transform: scale(x,y)  –  theo đó x, y là các giá trị ta muốn phóng lên theo trục x và y, thường thì ta để x = y để bức ảnh được phóng to mà vẫn giữ nguyên tỉ lệ. Chẳng hạn transform: scale(2,2) sẽ làm bức ảnh phóng to lên 2 lần;
• transition: all 1s ease  –  theo đó chúng ta sẽ làm bức ảnh được phóng to dần dần trong khoảng thời gian 1s chứ không bụp một cái to lên luôn (hơn Thánh Gióng!)

Code mẫu:

<style>
#phongto {
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
 
#phongto:hover {
transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
}
</style>
<img id="phongto" src="https://cdn.kiencang.net/wp-content/uploads/2021/02/phong-to-anh.jpg" alt="code mẫu phóng to ảnh bằng CSS3" width="640" height="425">

Đoạn code trên có nghĩa là mọi hiệu ứng chuyển đổi sẽ diễn ra trong vòng 1s, hiệu ứng sẽ xảy ra khi hover qua ảnh và làm bức hình tăng kích thước lên 1.5 lần. Các tiền tố -webkit, -moz, -o, -ms là để phù hợp với các trình duyệt khác nhau.

Đọc thêm: thẻ img trong html.

Kết quả demo: