Tạo CSS Overlay Cơ Bản (Không dùng JavaScript)

Overlay (lớp phủ) là hiệu ứng dùng trên website để dẫn dắt người dùng thực hiện hành động tiếp theo. Sử dụng đúng cách tạo trải nghiệm người dùng tích cực, giữ chân người dùng ở lại website.

Có nhiều cách tạo overlay. Hướng dẫn này tập trung vào HTML và CSS thuần túy (không JavaScript) để tạo hiệu ứng overlay khi di chuột qua hình ảnh.

Xây dựng cấu trúc HTML

Tạo boilerplate HTML cho image overlay:

<html>
<head>
  <style> /* CSS sẽ thêm sau */ </style>
</head>
<body>
  <div class="container"></div>
</body>
</html>

Hiểu vấn đề

Overlay đè lên một container (hình ảnh) và làm gì đó khi hover. Điều này hướng dẫn người dùng tương tác. Cần ít nhất 2 container: một cho hình ảnh, một cho overlay. Cả hai cần nằm trong một container cha lớn hơn.

Đừng vội viết CSS — hãy xây dựng HTML trước. Cấu trúc cơ bản:

<div class="container">
  <div class="overlay-outer">
    <img class="item-to-overlay" src="file-here" alt="this-is-our-image" />
    <div class="overlay-inner">This is our overlay div.</div>
  </div>
</div>

Viết CSS từ ngoài vào trong

1. Body

body {
  background-color: gray;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

2. Div.container

div.container { width: 100%; }

3. Div.overlay-outer (Container cha của ảnh và overlay)

div.overlay-outer {
  width: 50%;
  height: 400px;
  position: relative; /* Quan trọng: tạo "hàng rào" cho overlay-inner */
}

4. Img (Hình ảnh)

Hình ảnh cần khớp width/height với container cha. Có thể thêm border, crop ảnh tại đây.

5. Div.overlay-inner (Overlay thực tế)

div.overlay-inner {
  background-color: #9c1203; /* Màu overlay */
  height: 100%;
  width: 100%;
  opacity: 0; /* Ẩn mặc định */
  top: 0;
  left: 0;
  position: absolute; /* Đối với overlay-outer relative */
  padding: 0;
}

6. Nội dung bên trong overlay

.inside p {
  color: #fff;
  line-height: 150px;
  font-family: 'arial';
  padding: 20px;
  text-align: left;
}

7. Hiệu ứng Hover

.outside:hover .inside {
  opacity: .8;
  transition: opacity .5s;
}

Đặt opacity từ 0 sang 0.8 tạo hiệu ứng trong suốt. Thuộc tính transition làm mượt quá trình chuyển đổi.

Ví dụ hoàn chỉnh

<html>
<head>
  <style>
    * { box-sizing: border-box; }
    body { background: grey; max-width: 800px; height: 1000px; }
    .outside {
      width: 75%; height: 400px;
      display: inline-block; position: relative; cursor: pointer;
    }
    .images { width: 100%; height: 400px; object-fit: cover; border: 5px double black; }
    .inside {
      background-color: #9c1203; height: 100%; width: 100%;
      opacity: 0; top: 0; left: 0; position: absolute; padding: 0;
    }
    .inside p { color: #fff; line-height: 150px; font-family: 'arial'; padding: 20px; text-align: left; }
    .outside:hover .inside { opacity: .8; transition: opacity .5s; }
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS Overlay</h1>
    <div class="outside">
      <img class="images" src="..." alt="this-is-our-image" />
      <div class="inside"><p>This is an overlay!</p></div>
    </div>
  </div>
</body>
</html>

Bạn đã tạo thành công CSS overlay! Hãy thử thay đổi màu sắc, độ trong suốt, nội dung để tạo overlay riêng.