カード19

$BLOCK_NAME: '.card-19';

// 変数
$size: 320px;
$duration: 0.5s;
$line_duration: 0.2s;
$offset: 20px;
$c_border: #58c1db;
$w_border: 4px;

#{ $BLOCK_NAME } {
  position: relative;
  display: block;
  width: $size;
  height: $size;
  padding: $offset 0 0 $offset;

  &__img {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  &__img-container {
    width: 100%;
    height: 100%;
    transition: transform $duration;
    @at-root #{ $BLOCK_NAME }:hover & {
      transform: scale(1.2);
    }
    > img {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }

  &__border {
    position: absolute;
    top: 0;
    left: 0;
    bottom: $offset;
    right: $offset;
    transition: all $duration;
    opacity: 1;
    @at-root #{ $BLOCK_NAME }:hover & {
      transform: translate($offset, $offset);
      opacity: 0.5;
    }
  }

  &__border-line {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    &::before,
    &::after {
      position: absolute;
      content: '';
      background: $c_border;
    }
    &::before {
      height: $w_border;
      width: 0;
      transition: height $duration;
      animation: lineAnimX $line_duration linear forwards;
      @at-root #{ $BLOCK_NAME }:hover & {
        height: 50%;
      }
    }
    &::after {
      height: 0;
      width: $w_border;
      transition: width $duration;
      animation: lineAnimY $line_duration linear forwards;
      @at-root #{ $BLOCK_NAME }:hover & {
        width: 50%;
      }
    }
    &.--top-right {
      &::before {
        top: 0;
        left: 0;
      }
      &::after {
        top: 0;
        right: 0;
        animation-delay: $line_duration;
      }
    }
    &.--bottom-left {
      &::before {
        bottom: 0;
        right: 0;
        animation-delay: $line_duration * 2;
      }
      &::after {
        bottom: 0;
        left: 0;
        animation-delay: $line_duration * 3;
      }
    }
  }

  &__border-text {
    position: absolute;
    top: $offset;
    bottom: 0;
    left: $offset;
    right: 0;
    z-index: 1;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity $duration;
    @at-root #{ $BLOCK_NAME }:hover & {
      opacity: 1;
    }
  }
}

@keyframes lineAnimX {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes lineAnimY {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}