Code Zoom ảnh lớn hơn khi hơ chuột bằng CSS3

Code Zoom ảnh lớn hợn khi hơ chuột bằng CSS3. Code CSS zoom ảnh khi hơ chuột vào ảnh. Code phóng to ảnh khi hơ chuột vào bằng CSS.

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. Sau đây Bít Tuốt xin chia sẻ với các bạn  Code Zoom ảnh lớn hơn khi hơ chuột bằng CSS3

Ảnh đề mô

Để Zoom ảnh lớn hơn khi hơ chuột 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

Và giờ là code mẫu:

<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(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>

Đ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.