Cần hỗ trợ về hiệu ứng tráng gương hình ảnh

[Tri_Nguyen1 (Trí Nguyễn)]

Hiện tại em đang làm hiệu ứng tráng gương cho hình ảnh sản phẩm. Em đang vướng chỗ cách làm cho hiệu ứng chỉ xuất hiện trên hình ảnh của sản phầm chứ không xuất hiện trên backround(phần màu đen). Các bác có cao kiến gì giúp em với ạ, em cảm ơn nhiều.

Đây là link codepen của em ạ: codepen

[catlord]

chỉnh background trắng là được

[Tri_Nguyen1 (Trí Nguyễn)]

Mình chỉnh màu đen cho dễ thấy thôi chứ thực tế là như này nè

[catlord]

vậy có nhiều trick

1. giảm size animation lại vô cái hình thôi

.mask-1 {
  opacity: 0.5;
  left: -175px;
  top: 35px;
  position: absolute;
  width: 350px;
  height: 350px;
  background: linear-gradient(
    90deg,
    transparent,
    transparent,
    white,
    transparent
  );
  animation: mask 0.7s linear 1s infinite;
  opacity: 0;
}

@keyframes mask {
  0% {
    transform: translateX(0%);
    opacity: 0.5;
  }
  100% {
    transform: translateX(100%);
    opacity: 0.1;
  }
}

2. làm công phu hơn là animate từng frame cho nó khớp với 2 chai. cách này dài nên thôi không có code mẫu

3. làm 1 cái gif bằng size cái image rồi khi hover thì display. fake hiệu ứng