.hover-image-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 1;
}
.hover-image-container img {
  width: 100%;
  height: auto;
  display: block;
  transition: all 0.5s ease;
}
.hover-image-container .image-front {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 1;
}
.hover-image-container .image-back {
  position: relative;
  z-index: 1;
  opacity: 0;
}
.hover-image-container.fade:hover .image-front {
  opacity: 0;
}
.hover-image-container.fade:hover .image-back {
  opacity: 1;
}
.hover-image-container.zoom-in:hover .image-front {
  transform: scale(1.1);
  opacity: 0;
}
.hover-image-container.zoom-in:hover .image-back {
  transform: scale(1);
  opacity: 1;
}
.hover-image-container.slide-left:hover .image-front {
  transform: translateX(-100%);
  opacity: 0;
}
.hover-image-container.slide-left:hover .image-back {
  transform: translateX(0);
  opacity: 1;
}
.hover-image-container.flip-horizontal:hover .image-front {
  transform: rotateY(180deg);
  opacity: 0;
}
.hover-image-container.flip-horizontal:hover .image-back {
  transform: rotateY(0deg);
  opacity: 1;
}
.hover-image-container.rotate:hover .image-front {
  transform: rotate(180deg);
  opacity: 0;
}
.hover-image-container.rotate:hover .image-back {
  transform: rotate(0);
  opacity: 1;
}

/* 透過背景強制 */
.hover-image-container,
.hover-image-container * {
  background-color: transparent !important;
}