その他29

$BLOCK_NAME: '.other-29';

// 変数
$offset_bg: -20px;

#{ $BLOCK_NAME } {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 300px;
  border-radius: 24px;
  position: relative;

  &__img-container {
    width: 100%;
    height: 100%;
    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &__bg-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }

  &__bg {
    position: absolute;
    top: $offset_bg;
    left: $offset_bg;
    right: $offset_bg;
    bottom: $offset_bg;
    background: url(/parts/img/components/others/other27/noise.jpg);
    // background: url(/img/components/others/other27/noise.jpg);
    background-size: 100px 100px;
    opacity: 0;
    animation: other29Noise 0.5s steps(2) infinite;
    // transition: opacity 0.3s;

    &.--color-burn {
      mix-blend-mode: color-burn;
      opacity: 1;
      // @at-root #{ $BLOCK_NAME }:hover & {
      //   opacity: 1;
      // }
    }

    &.--darken {
      mix-blend-mode: darken;
      opacity: 1;
      // @at-root #{ $BLOCK_NAME }:hover & {
      //   opacity: 1;
      // }
    }

    &.--overlay {
      mix-blend-mode: overlay;
      opacity: 1;
      // @at-root #{ $BLOCK_NAME }:hover & {
      //   opacity: 1;
      // }
    }

    &.--plus-lighter {
      mix-blend-mode: plus-lighter;
      opacity: 0.6;
      // @at-root #{ $BLOCK_NAME }:hover & {
      //   opacity: 0.6;
      // }
    }

    &.--color-dodge {
      mix-blend-mode: color-dodge;
      opacity: 0.4;
      // @at-root #{ $BLOCK_NAME }:hover & {
      //   opacity: 0.4;
      // }
    }

    &.--difference {
      mix-blend-mode: difference;
      opacity: 1;
      // @at-root #{ $BLOCK_NAME }:hover & {
      //   opacity: 1;
      // }
    }
  }
}

@keyframes other29Noise {
  0% {
    transform: translate(0, 0);
  }
  33.333% {
    transform: translate(20px, 10px);
  }
  66.666% {
    transform: translate(-20px, -20px);
  }
  100% {
    transform: translate(0, 0);
  }
}