Code phóng to thumbnail khi hover với CSS3

02/01/2022 07:15 475

Code phóng to thumbnail khi hover với CSS3. Copy và sửa lại theo yêu cầu thực tế của bạn

Table of Contents

1.Video hướng dẫn

2. Code css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Code phóng to thumbnail khi hover với CSS3 fcwordpress.net</title>
	<style>
		
		.wrapp-image {
    max-width: 400px;
    margin: 40px auto;
}
		
		.image-thumbnail {
			width: 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 image-thumbnail */
		.image-thumbnail: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; 
		}
	</style>
</head>
<body>
	<div class ="wrapp-image">
		<img class="image-thumbnail" src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-Alex_Crowly.jpg" alt="">
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Code phóng to thumbnail khi hover với CSS3 fcwordpress.net</title>

<style>

.wrapp-image {

max-width: 400px;

margin: 40px auto;

}

.image-thumbnail {

width: 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 image-thumbnail */

.image-thumbnail: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;

}

</style>

</head>

<body>

</div>

</body>

</html>

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Kỹ thuật css cho checkbox input đẹp hơn [ 05/05/2023 10:32 ]
Css để tăng khoản cách giữa các dot trong border [ 13/12/2022 10:16 ]
Hiệu ứng hover slide image siêu đẹp [ 26/06/2022 13:47 ]
Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
Css menu vertical danh muc đơn giản [ 20/02/2022 12:40 ]
Html và css section với title, description và card siêu đơn giản [ 17/02/2022 11:22 ]
Hiệu ứng css đẹp transform scale3d [ 10/02/2022 04:05 ]
CSS Animations hoạt động như thế nào [ 14/01/2022 03:49 ]
Cách set size image cùng kích thước không bị vỡ hình với css [ 03/01/2022 03:12 ]
Hiệu ứng shine css đẹp animation [ 05/10/2021 08:06 ]

Code phóng to thumbnail khi hover với CSS3

1.Video hướng dẫn

2. Code css

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)