Css lớp phủ văn bản hình ảnh

Thật vậy, ai chưa bao giờ muốn nhanh chóng định vị một văn bản trên một hình ảnh?

Mã được cung cấp trong bài viết này có thể áp dụng cho bất kỳ trang web nào. Chỉ cần tích hợp mã HTML trên một trang và mã CSS vào biểu định kiểu của bạn

Bạn có thể tìm thấy nhiều cách khác nhau để làm điều đó trên internet, nhưng tôi muốn tổng hợp mọi thứ tôi tìm thấy để trích xuất một giải pháp tối thiểu và trên hết là sạch

Lớp phủ văn bản hình ảnh là gì?

Đối với tôi, lớp phủ chỉ là một lớp được đặt lên trên lớp khác. Trong HTML, điều đó có nghĩa là nó nằm ngoài quy trình vì nó phải được định vị trên một phần tử khác, điều này không thể thực hiện được với hành vi mặc định

Ghi chú. Tôi không nói ở đây về văn bản trên hình nền, đây là tiêu chuẩn trong HTML, nhưng văn bản trên một phần tử hình ảnh (thẻ img khét tiếng)

Lớp phủ văn bản đơn giản không có di chuột

Image + text NO HOVER

/* Color background and text overlay on hover */

  
  

    
Image + text
      ORIGINAL

  

  

    
Background + text
      HOVER
  

/* Image and text overlay on hover */

  

  

    
Image + text
      ORIGINAL
  

  

    

    
Image + text
      HOVER
  

mã CSS. lớp phủ văn bản và thay đổi văn bản/hình ảnh khi di chuột

Mã bên dưới sẽ được đưa vào định nghĩa kiểu của bạn

• Phong cách. css có trong tệp HTML của bạn nếu bạn làm việc trực tiếp trong HTML,
• Phong cách. css của chủ đề con nếu bạn làm việc với WordPress,
• hoặc tùy chọn trang Divi của bạn nếu cơ chế này chỉ được sử dụng tại một địa điểm cụ thể

Làm cách nào để hiển thị lớp phủ văn bản gốc hoặc văn bản đơn giản?

Lớp hình ảnh lớp phủ cho phép bạn đặt bộ chứa toàn cầu khi không sử dụng trình tạo trang. Trong bài viết này, tôi đã thay thế “chiều rộng. 100%;” . ký quỹ 80%. tự động;"

Lưu ý quan trọng. Vùng chứa lớp phủ hình ảnh PHẢI được "định vị" (ở đây là tương đối) để định vị các phần tử của chính nó

Hình ảnh gốc và lớp phủ văn bản được xác định bởi. lớp phủ hình ảnh. hình ảnh và. lớp phủ hình ảnh. xác định văn bản

• hình ảnh lấp đầy tất cả không gian có sẵn,
• văn bản được căn giữa vào hình ảnh bằng cách sử dụng "định vị" tuyệt đối trên khối vùng chứa và bản dịch X-Y (CSS cổ điển)

Làm cách nào để hiển thị lớp phủ mới khi di chuột?

Lớp phủ di chuột được cụ thể hóa bởi. lớp phủ hình ảnh. di chuột và "được định vị" tuyệt đối để chiếm toàn bộ bề mặt của vùng chứa, bao gồm cả hình ảnh và văn bản gốc (100% chiều rộng và chiều cao)

Khi di chuột, độ mờ của chuột sẽ thay đổi từ 0 thành 1 với sự chuyển đổi mượt mà để làm cho chuột xuất hiện trên div ban đầu

Để chỉ phủ một khối văn bản (không có hình ảnh), trước tiên bạn phải ẩn văn bản gốc vì không có hình ảnh mới để làm điều đó

Mã CSS

Tôi đã cố gắng hệ số hóa mã để làm cho nó đơn giản, dễ đọc, nhỏ gọn và dễ sử dụng. Để làm như vậy, tôi đã chia nó thành ba phần mà bạn có thể chọn theo nhu cầu của mình

Phần đầu tiên là chung cho cả ba loại lớp phủ trước đó và đây là phần duy nhất cần thiết cho lớp phủ văn bản đơn giản

/********* Simple or original overlay *******/

/* Main container */
.overlay-image {
  position: relative;
  width: 100%;
}

/* Original image */
.overlay-image .image {
  display: block;
  width: 100%;
  height: auto;
}

/* Original text overlay */
.overlay-image .text {
  color: #fff;
  font-size: 30px;
  line-height: 1.5em;
  text-shadow: 2px 2px 2px #000;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

Phần này là cần thiết bởi cả hai lớp phủ khi di chuột

/********* Overlay on hover *******/

/* New overlay on hover */
.overlay-image .hover {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

/* New overlay appearance on hover */
.overlay-image:hover .hover {
  opacity: 1;
}

Phần cuối cùng này chỉ cần thiết cho nền + lớp phủ văn bản khi di chuột

/********* Background and text only overlay on hover *******/

.overlay-image .normal {
  transition: .5s ease;
}
.overlay-image:hover .normal {
  opacity: 0;
}
.overlay-image .hover {
  background-color: rgba(0,0,0,0.5);
}

Phần kết luận

Như bạn có thể thấy, các lớp phủ không quá khó về mặt kỹ thuật… Thật đáng tiếc khi cơ chế này không phải là một phần của tất cả các chủ đề WordPress trên thị trường