Hướng dẫn tạo Image Hover Overlay Slide với CSS

DEMO

Image Hover Overlay có thể hiểu sang tiếng việt là hình ảnh được che phủ khi hover, đúng với các tên của nó, Image Hover Overlay là các hình ảnh mà khi hover chuột lên nó, hình ảnh sẽ được che phủ bởi một đoạn text, một button hay một liên kết nào đó.

Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một số Image Hover Overlay với các hiệu ứng khác nhau.

1. Xây dựng giao diện

Đầu tiên chúng ta sẽ xây dựng các thành phần, các bạn tạo file index.html và dán đoạn mã sau vào trong thẻ body:

Code
<div class="main">
  <h2>Freetuts.net hướng dẫn tạo Image Hover Overlay</h2>
  <p>Hover lên ảnh để xem hiệu ứng</p>
  <div class="container">
    <img src="./images/demo.jpg" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">Freetuts.net</div>
    </div>
  </div>
</div>

Trong ứng dụng này chúng ta sẽ có hai thành phần chính đó là phần hình ảnh và phần thẻ div, cái sẽ được hiện hiện đè lên hình ảnh khi hình ảnh được hover.

OK giờ chuyển qua bước tiếp theo.

2. Thêm CSS cho giao diện

Chúng ta đã có thành phần hiển thị rồi giờ sử dụng CSS để định dạng cho chúng, các bạn đặt đoạn CSS dưới đây vào bên trong thẻ style:

Code RUN
.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #888888;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

Đầu tiên, mình sẽ đặt thuộc tính opacity: 0; cho phần thẻ div, thuộc tính này sẽ khiến nó trở nên trong suốt và do đó hình ảnh sẽ được hiển thị.

Tiếp đến khi hình ảnh được hover, mình đặt lại opacity: 1; cho phần thẻ div này và nó sẽ được hiển thị đè lên phàn hình ảnh.

Chúng ta cũng có thể sử dụng đoạn mã CSS sau để thay thế cho đoạn CSS trên nếu bạn muốn một hiệu ứng khác khi hover vào hình ảnh:

Code RUN
.main {
  width: 500px;
  text-align: center;
  margin: auto;
}
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #888888;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

Khác với ở trên, lần này mình không sử dụng thuộc tính opacity nữa mà mình sẽ lợi dụng thuộc tính height và transition:

  • Mặc định, mình sẽ đặt height của phần thẻ div là 0 để ẩn nó đi.
  • Khi hình ảnh được hover, mình đặt lại height = 100% cho nó, do đã được thiết lập thuộc tính transition nên phần thẻ div sẽ có hiệu ứng chuyển động.

Dựa vào các thuộc tính của CSS, các bạn có thể tùy biến rất nhiều hiệu ứng, ở đây mình không thể trình bày hết được, giờ các bạn chạy file index.html để xem thành quả mình vừa tạo ra nhé!

3. Lời kết

Như vậy, qua bài viết này mình đã cùng các bạn tạo một Image Hover Overlay với CSS. Hi vọng nó sẽ giúp các có thêm sự lựa chọn trong quá trình xây dựng website, nếu có bất cứ thắc mắc nào các bạn có thể để lại trong phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net.

Tham khảo: w3schools.com

GIẢM GIÁ CUỐI TUẦN

Nhân dịp sinh nhật Cường ngày 18/08, mình giảm giá cực mạnh các khóa học fedu đến hết tuần này, các bạn tranh thủ nhé :)

Nguồn: freetuts.net

TỰ TẠO COMBO ĐỂ TIẾT KIỆM CHI PHÍ

Nếu bạn muốn tự tạo combo theo ý mình thì hãy sử dụng chức năng dưới đây, nó cho phép bạn chọn bất kì khóa học nào và cuối cùng là nhấn vào nút tạo combo, nếu mua càng nhiều thì chi phí càng rẻ.

Lập trình Backend

Lập trình Frontend

Thiết kế - Đồ họa