Cách zoom ảnh thumbnail khi hover bằng css3

Chức năng phóng to ảnh thumbnail được nhiều nhà thiết kế website sử dụng. Đây là chức năng dùng hiệu ứng di chuyển 2D, khi đó có thể phóng to, thu nhỏ lại hình ảnh khi hover 1 hình ảnh nảo đó. Để thực hiện được điều này, chúng ta áp dụng các thuộc tính Transform 2D có trong CSS3.

cách zoom ảnh bằng css3
Thuộc tính Transform trong css3

Để học code html, css, bạn vào https://codepen.io/khadar_ha/pen/boYzbo. Đây là công cụ online học lập trình web rất đơn giản và tiện lợi. Để viết được chức năng này, ta phải tạo 1 file html, 1 file css, tuy nhiên vì chúng ta đang tập thực hành nên sử dụng codepen.io là tiện lợi nhất.

học css3
Giao diện của codepen

Theo hình giao diện trên, ở bên trái là phần html, ô giữa là css, ô phải là js.  Chúng ta sẽ viết html trước, sau đó tới css và cuối cùng là js.

Viết code html

Đầu tiên, chúng ta tạo 1 thẻ div có class là thumbnail, trong đó chứa thẻ img.

Đoạn code html:

<div class=”thumbnail”>
<img src=”http://localhost/tkweb/img/demo1.jpg” alt=”vi-du” width=”200px” height=”200px”>
</div>

lập trình html
Đoạn code html

Viết code css

Chúng ta sử dụng các thuộc tính transform trong css3 để khi hover thì ảnh phóng to và thu nhỏ lại.

Chúng ta sẽ viết code cho class thumbnail.

.thumbnail{
width: 200px;
height:200px;
overflow: hidden;
border: 5px solid #e5e5e5;
}

code thumbnail css
Đoạn code class thumbnal css

Tiếp tục, ta viết đoạn css cho class thumbnail img

Code:

.thumbnail img {
width: 100%;
height: 100%;
transition-duration: 0.5s;
/* Safari */
-webkit-transition-duration: 0.5s;
/* Mozilla Firefox */
-moz-transition-duration: 0.5s;
/* Opera */
-o-transition-duration: 0.5s;
/* IE 9 */
-ms-transition-duration: 0.5s;
}

code thumbnail img css
Đoạn code thumbnail img css

Và cuối cùng, ta viết thumbnail img: hover

Code:

.thumbnail img:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
cursor: pointer;
}

hover thumbnail css
Đoạn code hover thumbnail css

Đã viết xong đoạn code zoom hình ảnh bằng css3, rất đơn giản phải nào.

Lưu ý: Trước khi viết được phần này, các bạn nên tìm hiểu và nắm vững phần học css cơ bản trước đã.

Bình Luận

comments