Animated Image Caption Hover Effect

by Pranab Dey

HTML

<div class="cont">
  <div class="image">
    <p>Some Text</p>
  </div>
</div>

SCSS

.cont {
  .image {
    width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
    display: flex;
    display: -ms-flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    background: url(http://www.arctic-council.org/images/News_images/2015-09-14-PAME-MPAs-350x350.jpg) top center no-repeat;
    background-size: cover;
    p {
      color: #fff;
      font-weight: 300;
      font-family: helvetica;
      font-size: 28px;
      display: block;
      position: relative;
      z-index: 2;
      transition: 0.4s linear;
      &:before,
      &:after {
        content: '';
        width: 140%;
        transition: 0.4s linear;
        border: 1px solid #fff;
        position: absolute;
      }
      &:before {
        top: -20%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      &:after {
        bottom: -20%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    &:before {
      content: '';
      position: absolute;
      width: 600px;
      height: 600px;
      background: linear-gradient(to bottom, rgba(255, 35, 135, 0.5), rgba(50, 15, 101, 0.7));
      transform: rotatez(0deg);
      transition: 0.4s linear;
    }
    &:hover {
      &:before {
        transform: rotatez(180deg);
        transition: 0.4s linear;
      }
      p {
        transform: rotatez(-30deg);
        transition: 0.4s linear;
        &:before,
        &:after {
          content: '';
          width: 310px;
          transition: 0.4s linear;
          border: 1px solid #fff;
          position: absolute;
        }
        &:before{
          left: 70%;
        }
        &:after{
          left: 30%;
        }
      }
    }
  }
}