Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Hiệu Ứng Hover Ảnh Bootstrap 4

Hiệu Ứng Hover Ảnh Bootstrap 4


Ngày 6 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay chúng ta sẽ đi vào cách tạo hiệu ứng hover hình ảnh trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Cách Tạo hiệu ứng hover ảnh bằng Bootstrap 4:

Sau khi bạn đã nắm được những yếu tố căn bản trong Bootstrap thì việc tiếp theo cần làm là chúng ta sẽ đi sâu hơn vào việc kết hợp các thuộc tính CSS và Bootstrap lại với nhau. Bây giờ ta sẽ đi vào cách tạo hiệu ứng hover hình ảnh bằng CSS và Bootstrap. Để đi vào hiệu ứng đầu tiên thì bạn xem kết quả trước để dễ hình dung nhé:

See the Pen Hover Image Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Đầu tiên chúng ta cần xây dựng sườn cho hiệu ứng hover 1 bằng thiết lập các thẻ div với class cần thiết trong file HTML. Để hiểu rõ hơn bạn xem đoạn code dưới đây nhé:

<div class="py-5 container">
    <h3 class="font-weight-bold mb-0">Hiệu Ứng Hover1</h3>
    <p class="font-italic text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <div class="row">
      <div class="col-8 mb-3 mb-lg-0">
        <div class="hover hover-1 text-white rounded"><img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1586163179/Bootstrap%20hover%20hinh%20anh/hinh_anh_rung_cay_e7rgnw.jpg" alt="">
          <div class="hover-overlay"></div>
          <div class="hover-1-noidung px-5 py-4">
            <h3 class="hover-1-tieude text-uppercase font-weight-bold mb-0"> <span class="font-weight-light">Tiêu Đề </span>Hình Ảnh</h3>
            <p class="hover-1-trichdan font-weight-light mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

Và đây là hình ảnh của kết quả trên nhé:

Hover Hình Ảnh Demo1 trong Bootstrap 4

Tiếp theo chúng ta đi vào thiết lập các thuộc tính CSS cho nó, để hiểu rõ hơn bạn xem đoạn code dưới đây nhé:

.hover {
    overflow: hidden;
    position: relative;
    padding-bottom: 60%;
}
.hover-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    transition: all 0.4s;
}
.hover img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
}
.hover-noidung {
    position: relative;
    z-index: 99;
}
.hover-1 {
    color: #fff;
}
.hover-1 img {
    width: 105%;
    position: absolute;
    top: 0;
    left: -5%;
    transition: all 0.3s;
}
.hover-1-noidung {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99;
    transition: all 0.4s;
}
.hover-1 .hover-overlay {
    background: rgba(0, 0, 0, 0.5);
}
.hover-1-trichdan {
    transform: translateY(0.5rem);
    transition: all 0.4s;
    opacity: 0;
}

Ở đây mình có một số lưu ý nhỏ là để hiểu được phần này bạn cần nắm vững các thuộc tính position trong CSS và có thể tham khảo ở đây nhé Thuộc tính Position CSS. Mình sẽ cho ẩn đi phần trích dẫn bằng thuộc tính opacity:0 trong class hover-1-trichdan, tạo một màu nền đen với độ mờ 0.5 nằm phía trước hình ảnh bằng thuộc tính background: rgba(0, 0, 0, 0.5);, thuộc tính transition dùng để xác định thời gian và hiệu ứng khi xảy ra một hành động nào đó như là click, hover... Để hiểu hơn bạn có thể tham khảo ở đây nhé: Transition trong CSS. Và bạn xem kết quả dưới đây nhé:

Hover Hình Ảnh CSS Demo1 trong Bootstrap 4

Bước cuối cùng là khi người dùng hover vào hình ảnh thì trích dẫn hình ảnh sẽ hiện lên, xóa bỏ background màu nền đen và di chuyển hình ảnh. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

.hover-1:hover .hover-1-noidung {
  bottom: 2rem;
}
.hover-1:hover .hover-1-trichdan {
  opacity: 1;
  transform: none;
}
.hover-1:hover img {
  left: 0;
}
.hover-1:hover .hover-overlay {
  opacity: 0;
}
Và đây là kết quả bên dưới nhé:

See the Pen Hover Image Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bây giờ mình sẽ sang hiệu ứng hover hình ảnh thứ hai bằng cách kết hợp CSS và Bootstrap4. Để hiểu rõ hơn bạn xem kết quả demo trước nhé:

See the Pen Hover Image 2 Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Sườn trang HTML để tạo hiệu ứng và một số thuộc tính CSS giống ở ví dụ trên nên mình sẽ không viết lại các code đó nhé. Có một lưu ý nhỏ là khi tạo hiệu ứng này bạn cần thay lại các thẻ div class có chứa hover-1 sang hover-2 nha. Bây giờ ta sẽ đi vào tạo hiệu ứng bằng thuộc tính :hover trong CSS. Để nắm rõ hơn bạn xem đoạn code sau đây nhé:

.hover2-noidung {
  position: relative;
  z-index: 99;
}
.hover-2 .hover-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
}
.hover-2-tieude {
  position: absolute;
  top: 50%;
  left: 0;
  text-align: center;
  width: 100%;
  z-index: 99;
  transition: all 0.3s;
}
.hover-2-trichdan {
  width: 100%;
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 0;
  text-align: center;
  z-index: 99;
  transition: all 0.3s;
}
.hover-2:hover .hover-2-tieude {
  transform: translateY(-1.5rem);
}
.hover-2:hover .hover-2-trichdan {
  bottom: 0.5rem;
  opacity: 1;
}
.hover-2:hover .hover-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
}

Ở đây có một thuộc tính mình cần lưu ý là background: linear-gradient giúp tạo màu nền bằng cách phối những màu nền xác định lại với nhau. Kết quả thì bạn có thể xem ở trên nhé.

Bây giờ chúng ta sẽ đi vào hiệu ứng hover hình ảnh 3. Sườn trang HTML để tạo hiệu ứng và một số thuộc tính CSS giống ở ví dụ trên nên mình sẽ không viết lại các code đó nhé. Để dễ hình dung bạn xem kết quả và đoạn code của nó để nắm rõ hơn nha:

See the Pen Hover Image 3 Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Chúng ta sẽ đi vào phần CSS để tạo hiệu ứng hover hình ảnh này bằng đoạn code sau đây nhé:

.hover-3::after {
  content: '';
  width: calc(100% - 3rem);
  height: calc(100% - 3rem);
  border: 1px solid #fff;
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 90;
  transition: all 0.3s;
  transform: scale(1.1);
  opacity: 0;
  display: block;
  opacity: 0;
}
.hover-3-noidung {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
  z-index: 99;
}
.hover-3-trichdan {
  opacity: 0;
  transform: scale(1.3);
  transition: all 0.3s;
}
.hover-3 img {
  width: 110%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hover-3 .hover-overlay {
  background: rgba(0, 0, 0, 0.2);
}
.hover-3:hover img {
  width: 100%;
}
.hover-3:hover::after {
  opacity: 1;
  transform: none;
}
.hover-3:hover .hover-3-trichdan {
  opacity: 1;
  transform: none;
}
.hover-3:hover .hover-overlay {
  background: rgba(0, 0, 0, 0.8);
}

Mình có lưu ý nhỏ ở hiệu ứng này là thuộc tính ::after sẽ thêm một thứ gì đó mà bạn muốn phía sau nội dung của mỗi đối tượng được chọn. Để xem lại hay tìm hiểu thêm bạn có thể tham khảo ở đây nhé: Thuộc Tính ::after CSS. Thuộc tính transform với giá trị scale giúp ta có thể tăng hay giảm kích thước của đối tượng được chọn.

Bây giờ mình sẽ đi vào ví dụ tạo hiệu ứng hover hình ảnh thứ 4, để hiểu rõ hơn bạn xem kết quả và đoạn code của nó sau đây nhé:

See the Pen Hover Image 4 Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Và dưới đây là những thuộc tính CSS mà bạn cần nên chú ý để tạo hiệu ứng hover hình ảnh 4 này:

.hover-4 img {
  width: 110%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hover-4 .hover-overlay {
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
}
.hover-4-tieude {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 3rem;
  z-index: 99;
}
.hover-4-trichdan {
  position: absolute;
  top: 2rem;
  left: 2rem;
  text-align: right;
  border-right: 3px solid #fff;
  padding: 0 1rem;
  z-index: 99;
  transform: translateX(-1.5rem);
  opacity: 0;
  transition: all 0.3s;
}
@media (min-width: 992px) {
  .hover-4-trichdan {
    width: 50%;
  }
}
.hover-4:hover img {
  width: 100%;
}
.hover-4:hover::after {
  opacity: 1;
  transform: none;
}
.hover-4:hover .hover-4-trichdan {
  opacity: 1;
  transform: none;
}
.hover-4:hover .hover-overlay {
  background: rgba(0, 0, 0, 0.8);
}

Không có thuộc tính nào mới nên bạn xem kết quả ở phía trên nha. Bây giờ hãy cùng mình đi vào tìm hiểu hiệu ứng hover hình ảnh 5 và để nắm rõ hơn bạn xem kết quả cũng như đoạn code của nó dưới đây nhé:

See the Pen Hover Image 5 Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem kết quả rõ hơn bạn chuyển sang chế độ screen 0.5x, 0.25x trong Codepen nhé. Bây giờ chúng ta sẽ tìm hiểu đoạn code CSS để tạo ra hiệu ứng này:

.hover-5::after {
  content: '';
  width: 100%;
  height: 10px;
  background: #47c650;
  position: absolute;
  bottom: -10px;
  left: 0;
  display: block;
  transition: all 0.3s;
  z-index: 999;
}
.hover-5 .hover-overlay {
  background: rgba(0, 0, 0, 0.4);
}
.hover-5-tieude {
  position: absolute;
  bottom: 1rem;
  left: 0;
  transition: all 0.3s;
  padding: 2rem 3rem;
  z-index: 99;
}
.hover-5-tieude span {
  transition: all 0.4s;
  opacity: 0;
  color: #47c650;
}
.hover-5:hover .hover-overlay {
  background: rgba(0, 0, 0, 0.8);
}
.hover-5:hover .hover-5-tieude {
  bottom: 0;
}
.hover-5:hover .hover-5-tieude span {
  opacity: 1;
}
.hover-5:hover::after {
  bottom: 0;
}

Và bạn có thể xem lại kết quả ở trên nha. Nếu có bất kì thắc mắc về thuộc tính CSS nào ở các ví dụ trên thì bạn cứ nhắn tin mình sẽ tìm hiểu và trả lời sớm nhất có thể nhé.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn tạo được một số hiệu ứng hover hình ảnh kết hợp CSS với Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!