Cách tạo: ảnh thu nhỏ

Học cách tạo ảnh thu nhỏ.

Ảnh thu nhỏ

Ảnh thu nhỏ là hình ảnh nhỏ đại diện cho hình ảnh lớn hơn (nhấp vào nó), thường được nhận diện qua viền xung quanh:

Tulip

Cách tạo ảnh thu nhỏ

Sử dụng phần tử <img> và bao bọc xung quanh nó một phần tử <a>. Sử dụng cài đặt viền để thiết lập樣式 hình ảnh và thêm hiệu ứng trôi:

<style>
img {
  border: 1px solid #ddd; /* Gray border */
  border-radius: 4px;  /* Rounded border */
  padding: 5px; /* Some padding */
  width: 150px; /* Set a small width */
}
/* 添加悬停效果（蓝色阴影） */
img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
<body>
<a target="_blank" href="img_forest.jpg">
  <img src="img_forest.jpg" alt="Forest">
</a>
</body>

Thử ngay

Trang liên quan

Giáo trình:Hình ảnh CSS