Làm thế nào để tạo: hiệu ứng叠加 phóng to

Học cách tạo hiệu ứng叠加 phóng to khi trỏ chuột

Hiệu ứng叠加 phóng to toàn màn hình

Đặt con trỏ chuột trên hình ảnh để xem hiệu ứng phóng to.

Avatar
Hello World

Thử trực tiếp

Làm thế nào để tạo hiệu ứng叠加 phóng to khi trỏ chuột

Bước 1 - Thêm HTML:

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Bước 2 - Thêm CSS:

/* Khay cần đặt lớp phủ. Điều chỉnh chiều rộng theo nhu cầu */
.container {
  position: relative;
  width: 50%;
}
/* Làm cho hình ảnh có thể điều chỉnh kích thước */
.image {
  width: 100%;
  height: auto;
}
/* Hiệu ứng叠加 (toàn cao và toàn rộng) - nằm trên cùng với hình ảnh */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}
/* Khi bạn đặt con trỏ chuột trên khay, văn bản叠加 sẽ hiển thị “phóng to” */
.container:hover .overlay {
  transform: scale(1);
}
/* Văn bản bên trong lớp phủ, định vị giữa theo chiều dọc và ngang */
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Thử trực tiếp

Trang liên quan

Hướng dẫn:Hình ảnh CSS

Hướng dẫn:Cách tạo hiệu ứng nổi hình ảnh khi trỏ chuột