Tôi có một hình ảnh, mà tôi muốn phóng to nếu người dùng di chuyển chuột qua nó. Hiện tại, điều này không diễn ra suôn sẻ.Phóng to hình ảnh mượt mà với CSS
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zoom</title>
<style>
.zoom:hover { zoom: 1.5; }
</style>
</head>
<body>
<p><img src="images/image.png" class="zoom"></p>
</body>
</html>
Sử dụng transform mịn zoom:
.zoom {
transition: transform 1s;
}
Nhưng bạn nên thay đổi để scale thay vì zoom (nhờ @val):
.zoom:hover {
transform: scale(2);
}
tôi created a fiddle, chỉ dành cho bạn.
Điều này sẽ chỉ hoạt động là thu phóng được đặt làm biến đổi: tỷ lệ (1.5), không phải với thu phóng (1.5) – vals
Chỉ cần thêm css này và xem nó trông như thế :)
.zoom{ -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); transition:0.7s ease all; -webkit-transition:0.7s ease all; -moz-transition:0.7s ease all;}
.zoom:hover{ -moz-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5);}
Để thực hiện quá trình chuyển đổi trơn tru, bạn phải sử dụng tài sản chuyển đổi.
.zoom{
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
}
.zoom:hover {
transform : scale(1.25);
-moz-transform : scale(1.25);
-webkit-transform : scale(1.25);
-o-transform : scale(1.25);
-ms-transform : scale(1.25);
}
sử dụng thuộc tính 'chuyển đổi'. Dù sao, 'zoom' là thuộc tính không chuẩn. – chatoo