Hướng dẫn bootstrap overlay icon on image - biểu tượng lớp phủ bootstrap trên hình ảnh

---

Tìm hiểu làm thế nào để tạo hiệu ứng biểu tượng lớp phủ hình ảnh khi di chuột.

Nội dung chính Show

• Biểu tượng Lớp phủ hình ảnh
• Cách tạo biểu tượng hình ảnh lớp phủ
• Làm cách nào để phủ biểu tượng hình ảnh?
• Làm cách nào để phủ hình ảnh trong bootstrap?
• Làm thế nào để bạn đặt một biểu tượng lên một hình ảnh trong HTML?
• Làm cách nào để di chuột một biểu tượng?

---

Biểu tượng Lớp phủ hình ảnh

Di chuột qua hình ảnh để xem hiệu ứng lớp phủ.

Hãy tự mình thử »

---

Cách tạo biểu tượng hình ảnh lớp phủ

Bước 1) Thêm HTML:

Thí dụ

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 

 

   
     
   
 

Bước 2) Thêm CSS:

Thí dụ

/* Container needed to position the overlay. Adjust the width as needed */
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
.image {
  width: 100%;
  height: auto;
}

Bước 2) Thêm CSS:
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: red;
}

/* Container cần thiết để định vị lớp phủ. Điều chỉnh chiều rộng khi cần */. Container {& nbsp; Vị trí: tương đối; & nbsp; chiều rộng: 100%; & nbsp; chiều rộng tối đa: 400px;}
.container:hover .overlay {
  opacity: 1;
}

/ * Làm cho hình ảnh để phản hồi */. Hình ảnh {& nbsp; chiều rộng: 100%; & nbsp; Chiều cao: Tự động;}
.icon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

. Vị trí: Tuyệt đối; & nbsp; Top: 0; & nbsp; Dưới cùng: 0; & nbsp; trái: 0; & nbsp; Phải: 0; & nbsp; Chiều cao: 100%; & nbsp; chiều rộng: 100%; & nbsp; Độ mờ: 0; & nbsp; Chuyển tiếp: .3s dễ dàng; & nbsp; màu nền: màu đỏ;}
.fa-user:hover {
  color: #eee;
}

Hãy tự mình thử »

Cách tạo biểu tượng hình ảnh lớp phủ Also see other image overlay effects (fade, slide, etc) in our How To - Image Hover Overlay.

Bước 1) Thêm HTML:

Làm cách nào để định vị biểu tượng tải xuống fontawgie trên một hình ảnh? Tôi muốn nó ở góc dưới bên trái của hình ảnh. Khi người dùng nhấp vào biểu tượng tải xuống, lời nhắc xuất hiện hỏi liệu họ có muốn tải xuống hình ảnh không.

Như vậy:

Mã liên quan

Phương pháp này cũng hoạt động với Bootstrap 3 FONT-CUỐI CÙNG? Tôi có thể muốn thêm một nút như thế này ở góc dưới bên trái:

Bootstrap Phông chữ tuyệt vời: https://fontawmie.com/v4.7.0/examples/

Tylerh

21.2K59 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng59 gold badges74 silver badges93 bronze badges

Đã hỏi ngày 3 tháng 2 năm 2019 lúc 22:49Feb 3, 2019 at 22:49

cooldood3490cooldood3490cooldood3490

2.3786 huy hiệu vàng49 Huy hiệu bạc64 Huy hiệu đồng6 gold badges49 silver badges64 bronze badges

Bạn cần một thùng chứa tương đối xung quanh hình ảnh của bạn và sau đó bạn đặt biểu tượng của mình thành vị trí: absolute.

.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }

Lý do tại sao bạn cần IMG để trở thành display: block là bởi vì, theo mặc định, ________ 10 là

.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }

Đã trả lời ngày 3 tháng 2 năm 2019 lúc 23:22Feb 3, 2019 at 23:22

Để phủ hai yếu tố, một cách tiếp cận là tạo cha mẹ

.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }

.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }

Trong trường hợp này, ví dụ này sẽ hoạt động, trong đó biểu tượng tải xuống có thể là bất kỳ yếu tố nào, chẳng hạn như nút bootstrap.

.img-download {
  position: relative;
}

.img-download > a {
  position: absolute;
  background: white;
  bottom: 0;
  left: 0;
}

  
  
  
  
   Download

Đã trả lời ngày 3 tháng 2 năm 2019 lúc 23:25Feb 3, 2019 at 23:25

Hãy để tôi thêm một biến thể, khi bạn cần định vị biểu tượng ở góc bên phải của IMG không xác định, nó không hoạt động với phản hồi trước đó. Nên giới thiệu một trình bao bọc như dưới đây:

.wrapper { display: flex; justify-content: center;}    
.content { position: relative; width: max-content}
.content img { display: block; }
.content .fa-download { position: absolute; bottom:10px; right:10px; }

Đã trả lời ngày 6 tháng 4 lúc 11:02Apr 6 at 11:02

Victor Diasvictor DiasVictor Dias

5665 Huy hiệu bạc12 Huy hiệu Đồng5 silver badges12 bronze badges

Tôi nghĩ rằng bạn có thể giải quyết điều này bằng thuộc tính Z-Index. Thử cái này:

Đã trả lời ngày 3 tháng 2 năm 2019 lúc 23:14Feb 3, 2019 at 23:14

PiazzipiazziPiazzi

2.3702 Huy hiệu vàng10 Huy hiệu bạc24 Huy hiệu đồng2 gold badges10 silver badges24 bronze badges

Làm cách nào để phủ biểu tượng hình ảnh?

Làm cách nào để phủ hình ảnh trong bootstrap?

Làm thế nào để bạn đặt một biểu tượng lên một hình ảnh trong HTML?

Làm cách nào để di chuột một biểu tượng?