Có ba ví dụ zoom như sau:
1. Phóng to sử dụng transform: scale(2); và transition: all .3s ease-out;
2. Phóng to sử dụng hai ảnh. Ảnh thứ hai sẽ được hiển thị khi di chuột chỉ bên phải của hình ảnh hiện tại mà không ảnh hưởng bất kỳ yếu tố trên trang.
3. Phóng to sử dụng hai ảnh. Ảnh thứ hai sẽ được hiển thị khi di chuột tại điểm liên quan đến vị trí hiện tại bằng cách sử dụng transform: translate (0,200px); mà không ảnh hưởng bất kỳ yếu tố trên trang.
Ví dụ 1
Tôi đang sử dụng 8 ảnh Rangoli để hiển thị các hiệu ứng zoom.
1. transition: all .3s ease-out: thuộc tính transition có giá trị sau.
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
a. transition-property:
b. transition-duration: Quyết định bao nhiêu lâu sẽ mất để hoàn thành transition.
c. transition-timing-function: thuộc tính này được dùng để xác định tốc độ thay đổi của transition trong thời gian đó.
=> linear sẽ duy trì tốc độ như nhau trong suốt quá trình chuyển đổi.
=> ease-in sẽ bắt đầu các ảnh động từ từ và kết thúc ở tốc độ cao.
=> ease-out sẽ bắt đầu các ảnh động ở tốc độ cao, sau đó kết thúc từ từ.
=> ease-in-out sẽ bắt đầu từ từ, nhanh nhất ở giữa các ảnh động, sau đó kết thúc từ từ.
=> ease giống ease-in-out, ngoại trừ nó bắt đầu nhanh hơn một chút so với khi nó kết thúc.
d. transition-delay: Nó chịu trách nhiệm thời gian bị delay từ khi transition được kích hoạt.
2. transform: scale(2): Phương thức scale tăng hoặc giảm kích thước của các phần tử. Nếu chúng ta cung cấp hai giá trị (x, y) chúng sẽ kéo dài các yếu tố theo chiều ngang và theo chiều dọc.
Code 1:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{
padding:20%;
float: left;
}
.rangoliPic {
width: 200px;
height:200px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.rangoliPic:hover {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
</style>
</head>
<body>
<div>
<img class="rangoliPic" src="Images/rangoli1.jpg" />
<img class="rangoliPic" src="Images/rangoli2.jpg" />
<img class="rangoliPic" src="Images/rangoli3.jpg" />
<img class="rangoliPic" src="Images/rangoli4.jpg" />
<img class="rangoliPic" src="Images/rangoli5.jpg" />
<img class="rangoliPic" src="Images/rangoli6.jpg" />
<img class="rangoliPic" src="Images/rangoli7.jpg" />
<img class="rangoliPic" src="Images/rangoli8.jpg" />
</div>
</body>
</html>
Kết quả:
Ví dụ 2:
Tôi đang sử dụng những ảnh tương tự trong ví dụ này. Nhưng sử dụng lại hai ảnh. Ví dụ này sẽ rất hữu ích khi chúng ta muốn hiển thị ảnh ở chỉ vị trí phía bên phải của hình ảnh. Các điểm cần lưu ý như sau.
1. position:absolute: Được áp dụng cho ảnh thứ hai để khi hình ảnh thứ hai được hiển thị trong trình duyệt với kết quả của di chuột, nó sẽ không làm xáo trộn các yếu tố khác của trang.
2. width: 0px: Để ẩn ảnh thứ hai.
3. transition: width 0.3s linear 0s: Tôi đã thảo luận trong ví dụ 1
Code 2:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{
padding:15%;
float: left;
}
.rangoliPic{
width: 200px;
height:200px;
}
.rangoliPicBig{
position:absolute;
width: 0px;
transition: width 0.3s linear 0s;
z-index: 10;
}
.rangoliPic:hover + .rangoliPicBig{
width:400px;
height:400px;
}
</style>
</head>
<body>
<div>
<img class="rangoliPic" src="Images/rangoli1.jpg" />
<img class="rangoliPicBig" src="Images/rangoli1.jpg" />
<img class="rangoliPic" src="Images/rangoli2.jpg" />
<img class="rangoliPicBig" src="Images/rangoli2.jpg" />
<img class="rangoliPic" src="Images/rangoli3.jpg" />
<img class="rangoliPicBig" src="Images/rangoli3.jpg" />
<img class="rangoliPic" src="Images/rangoli4.jpg" />
<img class="rangoliPicBig" src="Images/rangoli4.jpg" />
<img class="rangoliPic" src="Images/rangoli5.jpg" />
<img class="rangoliPicBig" src="Images/rangoli5.jpg" />
<img class="rangoliPic" src="Images/rangoli6.jpg" />
<img class="rangoliPicBig" src="Images/rangoli6.jpg" />
<img class="rangoliPic" src="Images/rangoli7.jpg" />
<img class="rangoliPicBig" src="Images/rangoli7.jpg" />
<img class="rangoliPic" src="Images/rangoli8.jpg" />
<img class="rangoliPicBig" src="Images/rangoli8.jpg" />
</div>
</body>
</html>
Kết quả:
Ví dụ 3
Ví dụ này cũng giống như Ví dụ 2. Sự khác biệt duy nhất là vị trí kết quả hình ảnh là khác nhau. Nếu chúng ta muốn thể hiện hình ảnh kết quả tại postion khác:
transform: translate(0,200px);: Dịch chuyển các phần tử từ vị trí hiện tại của nó.
Code 3
.rangoliPic:hover + .rangoliPicBig{
width:400px;
height:400px;
transform: translate(0,200px);
}