.hero-box.hero-box-effect-layla {
  h3.hero-box-title, p.hero-box-caption {
    color: #fff;
  }
  img, .hero-box-img {
    opacity: .9;
  }
  figcaption {
    margin: 60px;
    &:before, &:after {
      z-index: 3;
      content: '';
      position: absolute;
      top: -10px;
      bottom: -10px;
      left: -30px;
      right: -30px;
      background: transparent;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
      width: 0;
      opacity: 0;
      transition: all .5s;
      transform: skewX(30deg);
    }
    &:after {
      border: 0;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
      top: -30px;
      bottom: -30px;
      left: -10px;
      right: -10px;
      opacity: 0;
      height: 0;
      width: auto;
      transform: skewY(30deg);
      transition: all .5s;
    }
  }
  .hero-box-text {
    text-align: center;
    top: 50%;
    left: 0;
    right: 0;
    padding: 10px;
    transform: translateY(-50%);
    h3.hero-box-title {
      transform: translateY(-30px);
    }
    p.hero-box-caption {
      opacity: 0;
      transform: translateY(20px);
    }
  }
  &:hover {
    img, .hero-box-img {
      opacity: .7;
    }
    .hero-box-text {
      p.hero-box-caption {
        opacity: 1;
        transform: translateY(0px);
      }
      h3.hero-box-title {
        transform: translateY(0);
      }
    }
    figcaption {
      &:before {
        width: calc(100% + 60px);
        opacity: .4;
        transform: skewX(0deg);
      }
      &:after {
        height: calc(100% + 60px);
        opacity: .4;
        transform: skewY(0deg);
      }
    }
  }
}
