Thêm nút phát vào hình ảnh css

Ở mẫu Enfold mình đang dùng, mình nhớ ở trang chủ có mục “Recent Top Sellers” với hình ảnh nam và nữ và họ sẽ thay đổi khi rê chuột – https. //kriesi. tại/themes/enfold-shop/

Tôi chưa bao giờ nhìn vào hậu trường để xem họ làm điều này như thế nào. Các ví dụ đã bị xóa ngay bây giờ

Bất kỳ đề xuất sẽ được đánh giá rất cao. Cảm ơn bạn

10 tháng 12, 2021 lúc 12. 13 giờ chiều #1332298

Ismael

Người kiểm duyệt

Này Julio,

Cảm ơn yêu cầu của bạn

Bạn thực sự có thể sử dụng phần tử Hình ảnh để mở video dưới dạng liên kết bên ngoài, chỉ cần đảm bảo áp dụng tên lớp “noLightbox” trong trường Nâng cao > Cài đặt dành cho nhà phát triển > lớp CSS tùy chỉnh để ngăn hộp đèn mở. Đối với nút phát, bạn có thể thử mã css này

.avia-image-container:hover .avia-image-overlay-wrap:before {
    content: 'Play Button Here';
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 1000;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
}

Chỉ cần thay thế giá trị nội dung bằng hình ảnh nút phát thực tế hoặc biểu tượng phông chữ

Trân trọng,
Ismael

10 tháng 12 năm 2021 lúc 9. 11 giờ tối #1332376

JuLeS-NCfC-2021

Người tham gia

@ismael,
Cảm ơn bạn đã phản hồi. Tôi có một vài câu hỏi ngây thơ.
1. Tôi đã đặt Phần tử hình ảnh trong Phần màu
2. Tôi đã thêm tên lớp “noLightbox” vào trường Nâng cao > Cài đặt dành cho nhà phát triển > Lớp CSS tùy chỉnh
3. Câu hỏi ngây thơ ngớ ngẩn. Tôi thêm mã CSS này vào đâu?
4. Nội dung. 'Nút Phát Tại Đây'; . g. https. //vương quốc học. com/wp-content/uploads/2021/12/Play-Button-Mouseover-for-Thumbnails. png)?

Cám ơn rất nhiều về sự giúp đỡ của bạn

11 tháng 12 năm 2021 lúc 1. 13 giờ sáng #1332379

JuLeS-NCfC-2021

Người tham gia

CẬP NHẬT. Tôi có tính năng Di chuột đang hoạt động, tuy nhiên, không thể nhấp vào nút phát nhưng hình ảnh trong Phần tử hình ảnh có thể nhấp được. Làm thế nào tôi có thể giải quyết điều này?

Một dự án mà tôi đang thực hiện hiện liên quan đến việc thiết kế lại một trang web hiện có và chuyển đổi nó thành một thiết kế đáp ứng bằng cách sử dụng khung Bootstrap. Một phần của trang chủ có danh sách các hình ảnh thu nhỏ của video. Chúng tôi muốn phủ biểu tượng nút phát lên hình ảnh để đưa ra dấu hiệu về điều gì sẽ xảy ra khi người dùng nhấp vào hình thu nhỏ. Điều này khá đơn giản khi bạn có một hình ảnh có kích thước cố định, nhưng sẽ phức tạp hơn một chút với hình ảnh phản hồi. Mẹo để làm cho nó hoạt động là thêm một dấu phẩy vào phần tử chứa

Bài đăng này ban đầu xuất hiện trên douglasgreen. com. Nếu bạn đang đọc nó trên một trang web khác, vui lòng xem bài viết gốc

Kỹ thuật 1 (phương pháp gốc)

Sử dụng phần tử nhịp được định vị tuyệt đối với hình nền của nút phát. Hình nền cần phải có độ trong suốt nhất định vì nó sẽ xuất hiện trên hình thu nhỏ video của bạn. Thay đổi thuộc tính kích thước nền để điều chỉnh kích thước của nút phát tại các điểm ngắt trên thiết bị di động và máy tính để bàn khác nhau

.videos img {
  width:100%;
  height:auto;
}
a.video {
  float: left;
  position: relative;
}
a.video span {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../path-to-your-image/play-btn.png") no-repeat;
  background-position: 50% 50%;
  background-size: 300%;
}
@media screen and (max-width: 480px) {
  a.video span {
    background-size: 400%;
  }
}

Đây là một bản demo với mã nguồn. demo nút phát video đáp ứng

Kỹ thuật 2 (phông chữ biểu tượng)

Sử dụng Phông chữ Tuyệt vời (hoặc bộ phông chữ biểu tượng khác) để hiển thị nút phát trên hình thu nhỏ video của bạn. Điều này có lợi thế là không phụ thuộc vào độ phân giải. Biểu tượng nút phát sẽ rõ ràng và sắc nét bất kể độ phân giải của thiết bị. Như với phương pháp ban đầu, giá đỡ nút phát sẽ được định vị tuyệt đối. Sử dụng. sau hoặc. trước bộ chọn phần tử giả để hiển thị biểu tượng nút phát

/* Just a parent container for the videos */
.videos {
  margin: 20px auto;
  max-width: 700px;
}
/* Individual video container */
.video-wrap {
  position: relative;
  max-width: 700px;
  width: 100%;
  margin-bottom: 10px;
}
.video-wrap .placeholder {
  max-width: 700px;
  width: 100%;
}
.video-wrap .play-btn {
  position: absolute;
  max-width: 700px;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1; /* needed if using Bootstrap */
  text-align: center;
  color: #eaeaea;
  background-color: rgba(255,255,255,.4);
  border-radius: 50px;
  transition: color, background-color .2s ease;
}
.video-wrap .play-btn:hover,
.video-wrap .play-btn:focus {
  color: #000;
  background-color: rgba(255,255,255,.8);
  cursor: pointer;
}
.play-btn::after {
  /*
  Font Awesome recommends these styles
  https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
  */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  /*
  Define the font family, weight, and icon
  */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 60px;
  content: "\f04b";
  /* positioning tweaks */
  padding-top: 20px;
  padding-left: 10px;
}

Đây là bản demo của phương pháp phông chữ biểu tượng. Bản trình diễn nút phát phông chữ biểu tượng CSS

Kỹ thuật 3 (nút phát SVG)

Có lẽ cách dễ dàng hơn để thêm biểu tượng nút phát là sử dụng nút phát SVG. Bạn không phải tải thư viện phông chữ của bên thứ ba, điều này sẽ giúp giảm thời gian tải của bạn. Với SVG, bạn có quyền tự do tạo bất kỳ đồ họa nào bạn muốn và bạn có thể dễ dàng thay đổi màu sắc bằng thuộc tính 'fill'. Đối với bản trình diễn này, chúng tôi đang sử dụng cùng một kỹ thuật định vị tuyệt đối. Mã CSS theo sau, cũng như một liên kết đến bản demo nơi bạn có thể lấy mã SVG