03/08/2018, 09:37

Viết chức năng phóng to thumbnail khi hover với CSS3

DOWNLOAD Chào ...

DOWNLOAD

Chào các bạn, hôm nay mình hướng dẫn các bạn viết chức năng phóng to thumbnail khi hover chuột bằng CSS3. Chức năng này sử dụng các thuộc tính 2D Transform có trong CSS3 dùng để xử lý hiệu ứng di chuyển 2D, ví dụ bạn có thể phóng to, thu nhỏ khi hover chuột vào một phần tử HTML nào đó, ... Chính vì những ưu điểm tuyệt vời đó nên mình sẽ áp dụng nó vào chức năng này. Chúng ta bắt tay vào việc thôi !

1.Ý tưởng thực hiện 

Để mình nói sơ qua về ý tưởng thực hiện của mình. Chức năng phóng to thumbnail khi hover chuột này đang rất phổ biến và được sử dụng rộng rãi trên nhiều website, đặc biệt là các blog, trang tin tức, ... Nó tạo hiệu ứng chuyển động đẹp, bắt mắt giúp người dùng cảm thấy thú vị, vì thế khách sẽ ở lại trang của bạn lâu hơn và thu hút được nhiều người truy cập hơn. Cho nên vì thế mình làm bài viết này để giúp các bạn thực hành một số kiến thức về CSS3, vừa có thể tích hợp chức năng vừa tiện lợi vừa nhỏ gọn này vào trong website của mình.

2. Xây dựng chức năng

Viết HTML

Đầu tiên các bạn tạo file index.html và copy đoạn code sau :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Chức năng phóng to thumbnail khi hover chuột với CSS &bull; Freetuts.net</title>
	<style>
		
	</style>
</head>
<body>
	<div class="thumbnail">
		<img src="thumbnail.jpg" alt="">
	</div>
</body>
</html>
Trong đó :

  • .thumbnail là khung chứa thumbnail.
  • Cặp thẻ style là nơi mình sẽ code CSS ở đó (Xem ở bước 2 phần Viết CSS).

Viết CSS

Trước tiên chúng ta sẽ viết CSS cho khung chứa thumbnail trước, các bạn copy đoạn code sau và dán vào bên trong cặp thẻ style :

/* Khung chứa thumbnail */
.thumbnail {
	awidth: 300px;
	height: 200px; 
	overflow: hidden; 
	border: 1px solid #e5e5e5; 
}
Giải thích:
  • overflow: hidden; là để thumbnail không tràn ra ngoài khung chứa khi phóng to lên.
  • Còn về phần awidth và height các bạn có thể tuỳ chỉnh theo ý thích miễn phù hợp với kích thước của thumbnail.

Tiếp theo là thumbnail, các bạn chèn tiếp nội dung sau vào bên dưới :

/* Thumbnail */
.thumbnail img {
	awidth: 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;
}
Giải thích:
  • Về phần awidth và height của thumbnail, mình sẽ để nó là 100% để nó kéo dãn hết khung chứa thumbnail.
  • Thuộc tính transition-duration sẽ chứa giá trị là thời gian(đơn vị s = giây) nó sẽ thiết lập quá trình để phóng to thumbnail mất bao nhiêu thời gian, các bạn có thể chỉnh thời gian tuỳ ý nhưng theo mình 0.5s là OK rồi.

Cuối cùng là phần quan trọng nhất trong bài này, đó chính là viết sự kiện hover chuột vào thumbnail thì sẽ phóng to ảnh lên. Copy và chèn đoạn code sau vào bên dưới :

/* Hover chuột vào thumbnail */
.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; 
}
Giải thích: Thuộc tính scale() trong transform được dùng để kéo dãn đối tượng, ở đây mình dùng chỉ số 1.2 cho cả x và y, các bạn cũng có thể thay đổi chỉ số này hoặc các bạn muốn x và y có các chỉ số các nhau thì có thể tuỳ chỉnh theo cấu trúc sau : scale(x, y). Nếu muốn hiểu thêm và xem demo về thuộc tính scale() thì các bạn có thể tham khảo tại Bài 10: Học CSS3 - 2D Transforms.

Đây là toàn bộ code của phần này :

/* Khung chứa thumbnail */
.thumbnail {
	awidth: 300px;
	height: 200px; 
	overflow: hidden; 
	border: 1px solid #e5e5e5; 
}

/* Thumbnail */
.thumbnail img {
	awidth: 100%; 
	height: 100%;  
	transition-duration: 0.5s;
		/* Safari & Google Chrome */
		-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;
}
		
/* Hover chuột vào thumbnail */
.thumbnail img:hover {
	transform: scale(1.2);
		/* Safari & Google Chrome */
		-webkit-transform: scale(1.2);
		/* Mozilla Firefox */
		-moz-transform: scale(1.2); 
		/* Opera */
		-o-transform: scale(1.2);
		/* IE 9 */
		-ms-transform: scale(1.2);
	cursor: pointer; 
}
OK ! Giờ các bạn chạy và xem thành quả của mình nhé !

3. Lời kết 

Đây là một bài tập nho nhỏ giúp các bạn có thể ôn lại và thực hành về CSS3 Transform 2D, điều đặc biệt hơn là có thể tích hợp thành quả của mình sau bài này vào website, blog của bạn. Chúc các bạn thành công !

-------------------#####-------------------

ZOOM IN THUMBNAIL WHEN HOVER MOUSE WITH CSS3

-------------------#####-------------------

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Tạo chức năng Back to top jQuery – scrollTo Top

Chức năng back to top hay là scrollTo Top một ví dụ sử dụng jQuery là một sự cần thiết cho tất cả website hiện nay, tuy nhỏ nhưng rất có ích dành cho các bạn lười kéo chuột chỉ cần bấm vào link sẽ lên trên đầu trang web. Chức năng back to top rất tiện lợi cho người dùng thường được khách hàng yêu ...

Tạ Quốc Bảo viết 3 tuần trước

Tạo chức năng ” Scroll to Top ” với jQuery và CSS3

Scroll to Top là một chức năng mà chúng ta thường thấy khi cuộn trang ở những web có nội dung dài, và khi chúng ta xem đến những nội dung bên dưới thì sẽ xuất hiện một nút bấm cho phép chúng ta trở lại vị trí đầu của nội dung. Xem Demo | Download Đây là một chức năng rất căn bản mà các ...

Hoàng Hải Đăng viết 3 tuần trước

[BÀI 36] HƯỚNG DẪN VIẾT MỘT TRANG WEB CƠ BẢN (PHẦN 5: VIẾT CHỨC NĂNG QUẢN LÝ KHÓA HỌC)

Trang web tôi đang hướng dẫn các bạn viết là một trang landing page của Devpro.edu.vn, trung tâm chúng tôi chuyên đào tạo lập trình PHP, Android, IOS, đồ họa,… chuyên nghiệp với các chuyên gia nhiều năm kinh nghiệm. Ở trang này có phần quản lý các khóa học mà bên Devpro đang mở lớp, và bài ...

Trịnh Tiến Mạnh viết 3 tuần trước

[BÀI 23] HƯỚNG DẪN VIẾT CHỨC NĂNG ĐĂNG NHẬP HOÀN CHỈNH VỚI PHP VÀ MYSQL

Sau khi đã tìm hiểu cơ bản về PHP và mysql. Những chức năng phổ biến chúng ta có thể thực hiện một cách dễ dàng, để làm được chức năng đăng nhập chúng ta cần làm các bước sau: Các bước để thực hiện chức năng đăng nhập: Tạo database và một bảng lưu danh sách người dùng. Việc đăng nhập có thành ...

Tạ Quốc Bảo viết 3 tuần trước

[C#] Hướng dẫn viết chức năng tắt màn hình Monitor

Hi! xin chào các bạn, tiếp theo mình sẽ tiếp tục hướng dẫn các bạn viết một ứng dụng đơn giản đó là chức năng tắt màn hình máy tính bằng C# . [C#] How to Turn Off Monitor Dưới dây mình sẽ khai báo 1 enum gồm 3 trạng thái của Monitor ...

Tạ Quốc Bảo viết 3 tuần trước
0