[Share Code] Chia sẻ code ẩn hiện text với hiệu ứng hover mượt mà trong website WordPress

Chia sẻ code ẩn hiện text với hiệu ứng hover mượt mà trong website WordPress

Bạn đang cần tạo hiệu ứng ẩn hiện text với hiệu ứng hover mượt mà trong website WordPress mà chưa biết làm như thế nào, Vareno chia sẻ đoạn code css, bạn chỉ cần thêm vào file style.css trong theme đang sử dụng hoặc thêm vào Custom CSS trong thêm Flatsome

/*Text - Ẩn hoàn toàn, hover mới hiện*/
.hide-text {
  position: relative;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease,
              transform 0.35s ease;
}

.box-text:hover .hide-text,
.box-text-inner:hover .hide-text {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

/* Gradient fade ở cuối text khi nội dung dài */
.hide-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(to bottom, transparent, rgba(34, 34, 34, 0.95));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.box-text:hover .hide-text::after,
.box-text-inner:hover .hide-text::after {
  opacity: 1;
}
/*End Text*/

Hướng dẫn chèn code ẩn hiện text với hiệu ứng hover mượt mà trong website WordPress

Bước 1: Thêm code trên vào file style.css trong theme đang sử dụng hoặc thêm vào Custom CSS trong thêm Flatsome

Bước 2: Thêm class: hide-text vào khu vực cần tạo

Vareno chúc bạn thành công