<section>
  <h1>Hover Card Effect</h1>
  <div class="cards">
    <div class="card">
      <div class="cardContents">
        <div class="cardText">
          <h2 class="cardTitle">Card Title</h2>
          <h3 class="cardSubtitle">Subtitle</h3>
          <p class="cardCopy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed tincidunt nibh. Nullam luctus nunc placerat consectetur finibus. Donec faucibus faucibus tortor, sed mollis libero.</p>
        </div>
      </div>
    </div>
  </div>
</section>

body {
  padding: 1em .5em;
  background: #0f0f0f;
  background: -moz-linear-gradient(-45deg,  #0f0f0f 0%, #1c1c1c 100%);
  background: -webkit-linear-gradient(-45deg,  #0f0f0f 0%,#1c1c1c 100%);
  background: linear-gradient(135deg,  #0f0f0f 0%,#1c1c1c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f0f0f', endColorstr='#1c1c1c',GradientType=1 );
  color: #fff;
}

h1 {
  text-align: center;
  margin: 0 auto .5em;
}

.cards {
  max-width: 960px;
  margin: 0 auto;
  padding: 1em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  
  .card {
    position: relative;
    z-index: 20;
    width: 250px;
    height: 350px;
    padding: 15px;
    margin: 0 1em 2em;
    cursor: pointer;
    
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 5;
      border: 2px solid #333;
      background: #101010;
      border-radius: 10px;
    
      transition: all .1s ease-in;
    }
    
    &::before {
      content: '';
      display: block;
      position: absolute;
      width: 75%;
      height: 75%;
      z-index: -1;
      box-shadow: 0px 0px 50px 0px rgba(255, 63, 197, 0.75);
      opacity: 0;
      transition: all .15s linear;
      border-radius: 50%;
    }
    
    .cardContents {
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 20;
      
      .cardText {
        position: absolute;
        bottom: -39%;
        left: 0;
        right: 0;
        transition: bottom .15s ease-in;
        
        h2 {
          margin: 0;
        }
        h3 {
          margin: 0;
        }
        p {
          margin: .5em 0 0;
        }
      }
    }
    
    &:hover {
      
      &::after {
        background: #000;
        border-color: cyan; 
      }
      &::before {
        opacity: 1;
        animation-name: glowSpin;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
      
      .cardContents {
        .cardText {
          bottom: 0;
        }
      }
    }
  }
}

@keyframes glowSpin {
  0%   {
      top: 10px;
      left: 25%;
  }
  25%   {
    top: 25px;
    left: 10px;
  }
  50%   {
    top: 15%;
    left: 25%;
  }
  75%   {
    top: 25%;
    left: 15%;
  }
  100%   {
      top: 10px;
      left: 25%;
  }
}