$primary: #2980b9;
$secondary: white;

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  background: #2c3e50;
  line-height: 1.5;
  padding: 3em;
  text-align: center;
}

.media {
  display: inline-block;
  position: relative;
  vertical-align: top;
} 

.media__image {
  display: block;
}

.media__body {
  background: rgba($primary,0.7);
  bottom: 0;
  color: $secondary;
  font-size: 1em; 
  left: 0;
  opacity: 0;
  overflow: hidden; 
  padding: 3.75em 3em;
  position: absolute; 
  text-align: center; 
  top: 0;
  right: 0;
  transition: 0.6s;
  
  &:hover {
    opacity: 1;
  }
  
  &:after, &:before {
    border: 1px solid rgba($secondary,0.7);
    bottom: 1em;
    content: '';
    left: 1em;
    opacity: 0;
    position: absolute; 
    right: 1em;
    top: 1em;
    transform: scale(1.5); 
    transition: 0.6s 0.2s;
  }
  
  &:before {
    border-bottom: none;     
    border-top: none;
    left: 2em;
    right: 2em;
  }
  
  &:after {
    border-left: none;
    border-right: none;    
    bottom: 2em;
    top: 2em;
  }

  
  &:hover:after, &:hover:before {
    transform: scale(1);
    opacity: 1;
  }
}

.media__body h2 {
  margin-top: 0;
}

.media__body p {
  margin-bottom: 1.5em;
}



@for $i from 2 through 6 {
  .media:nth-child(#{$i}) .media__body{
    background: transparentize(adjust-hue($primary, $i * 40deg),0.3);
  }  
}