<header>
  <h1 class="penTitle">Rotate and Reveal</h1>
</header>

<div class="rotateXThumbList">
  <a href="#" class="rotateXThumb">
    <div class="rotateXThumb-body">
      <div class="rotateXThumb-body-image">
        <img class="rotateXThumb-body-image-el" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44303/unsplash-01-t.jpg" alt="" />
      </div>
      <div class="rotateXThumb-body-label">
        <h2 class="rotateXThumb-body-label-title">The Mountain</h2>
      </div>
    </div>
  </a>
  <a href="#" class="rotateXThumb">
    <div class="rotateXThumb-body">
      <div class="rotateXThumb-body-image">
        <img class="rotateXThumb-body-image-el" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44303/unsplash-02-t.jpg" alt="" />
      </div>
      <div class="rotateXThumb-body-label">
        <h2 class="rotateXThumb-body-label-title">The Majestic Wood</h2>
      </div>
    </div>
  </a>
  <a href="#" class="rotateXThumb">
    <div class="rotateXThumb-body">
      <div class="rotateXThumb-body-image">
        <img class="rotateXThumb-body-image-el" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44303/unsplash-03-t.jpg" alt="" />
      </div>
      <div class="rotateXThumb-body-label">
        <h2 class="rotateXThumb-body-label-title">The Little Tree that Could</h2>
      </div>
    </div>
  </a>
  <a href="#" class="rotateXThumb">
    <div class="rotateXThumb-body">
      <div class="rotateXThumb-body-image">
        <img class="rotateXThumb-body-image-el" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44303/unsplash-04-t.jpg" alt="" />
      </div>
      <div class="rotateXThumb-body-label">
        <h2 class="rotateXThumb-body-label-title">Hit the Road, Jack</h2>
      </div>
    </div>
  </a>
</div>


<!-- SECOND STYLE  -->
<header>
  <h1 class="penTitle">Clip Path</h1>
</header>
<div class="clipPathThumbList">
  <a href="#" class="clipPathThumb">
    <div class="clipPathThumb-body">
      <div class="clipPathThumb-body-image">
        <img class="clipPathThumb-body-image-el" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44303/unsplash-01-t.jpg" alt="" />
      </div>
      <div class="clipPathThumb-body-label">
        <h2 class="clipPathThumb-body-label-title">The Mountain</h2>
      </div>
    </div>
  </a>
  <a href="#" class="clipPathThumb">
    <div class="clipPathThumb-body">
      <div class="clipPathThumb-body-image">
        <img class="clipPathThumb-body-image-el" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44303/unsplash-02-t.jpg" alt="" />
      </div>
      <div class="clipPathThumb-body-label">
        <h2 class="clipPathThumb-body-label-title">The Majestic Wood</h2>
      </div>
    </div>
  </a>
  <a href="#" class="clipPathThumb">
    <div class="clipPathThumb-body">
      <div class="clipPathThumb-body-image">
        <img class="clipPathThumb-body-image-el" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44303/unsplash-03-t.jpg" alt="" />
      </div>
      <div class="clipPathThumb-body-label">
        <h2 class="clipPathThumb-body-label-title">The Little Tree that Could</h2>
      </div>
    </div>
  </a>
</div>

@import "compass/css3";

@import 'compass/utilities/general/clearfix';

$type1Base : 'rotateXThumb';
$type1BaseColor: desaturate(lighten(teal, 10%), 20%);
$type1TransformAngle: 81deg;
$type1TransformPerspective: 1000px;

$breakpoint-small: 640px;
$backEaseInOut: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)';
$mouseOver-transition:all 0.5s #{$backEaseInOut};
$mouseOut-transition:all 0.3s ease-out;

//Use this to calculate height based on a fixed ratio
//With the padding-bottom trick
@mixin fixedRatioBase() {
  position:relative;
}
//Use this to calculate height based on a fixed ratio
//With the padding-bottom trick
@mixin fixedRatio($w, $ratio) {
  width: $w;
  padding-bottom: $w * $ratio;
}

* {
  box-sizing : border-box;
}
body {
  margin:0;
  padding:0;
  position:relative;
}

.#{$type1Base}List {
  @include clearfix();
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  @media screen and (min-height:400px) and (min-width:$breakpoint-small) {
    margin-top:1em;
  }
}

.#{$type1Base} {
  
  @include fixedRatio(100%, 0.4);
  
  @media screen and (min-width:$breakpoint-small) {
    @include fixedRatio(25%, 1);
  }
  position:relative;
  display:block;
  overflow:hidden;
  perspective: $type1TransformPerspective;
  float:left;
  
  .#{$type1Base}-body {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
  }

  .#{$type1Base}-body-image,
  .#{$type1Base}-body-label {
    transition:$mouseOut-transition;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
  }

  .#{$type1Base}-body-image {
    
    transform-origin: bottom center;
    transform:translate3d(0,0,0);
    
    .#{$type1Base}-body-image-el {
      max-width:100%;
      display:block;
    }
  }
  
  .#{$type1Base}-body-label {
    
    transform-origin: top center;
    transform:translate3d(0,100%,0) rotateX( -1 * $type1TransformAngle ) scale(1.1);
    color:white;
    background: $type1BaseColor;
    text-align:center;
    
  }
  
  .#{$type1Base}-body-label-title {
    position: absolute;
    top: 50%;
    left:auto;
    transform: translateY(-100%);
    width:100%;
    text-align:center;
    font-weight:300;
    font-size:1.25em;
  }

  &:hover {
    .#{$type1Base}-body-image,
    .#{$type1Base}-body-label {
      transition:$mouseOver-transition;
    }
    .#{$type1Base}-body-image {
      transform:translate3d(0,-100%,0) rotateX($type1TransformAngle) scale(1.2);
    }
    
    .#{$type1Base}-body-label {
      transform:translate3d(0,0,0) rotateX(0deg) scale(1);
    }    
  }

}

$type2Base : 'clipPathThumb';
$type2BaseColor: desaturate(lighten(purple, 10%), 20%);
$type2TransformAngle: 81deg;
$type2TransformPerspective: 1000px;

.#{$type2Base}List {
  @include clearfix();
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  @media screen and (min-height:400px) and (min-width:$breakpoint-small) {
    margin-top:1em;
  }
}

.#{$type2Base} {
  
  @include fixedRatio(100%, 0.4);
  
  @media screen and (min-width:$breakpoint-small) {
    @include fixedRatio(33.333%, 0.6);
  }
  position:relative;
  display:block;
  overflow:hidden;
  perspective: $type1TransformPerspective;
  float:left;
  
  .#{$type2Base}-body,
  .#{$type2Base}-body-image,
  .#{$type2Base}-body-label {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
  }

  .#{$type2Base}-body-image,
  .#{$type2Base}-body-label {
    transition:$mouseOut-transition;
  }

  .#{$type2Base}-body-image {
    
    transform-origin: bottom center;
    transform:translate3d(0,0,0);
    
    .#{$type2Base}-body-image-el {
      max-width:100%;
      display:block;
    }
  }
  
  .#{$type2Base}-body-label {
    padding:0.5rem;
    color:white;
    background: rgba($type2BaseColor,1);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  
  .#{$type2Base}-body-label-title {
    position: absolute;
    bottom: 0.5rem;
    left:0.5rem;
    text-align:center;
    font-weight:300;
    font-size:1.25em;
    text-align:left; 
  }

  &:hover {
    .#{$type2Base}-body-image,
    .#{$type2Base}-body-label {
      transition:$mouseOver-transition;
    }
/*    .#{$type2Base}-body-image {
      transform: scale(1.2);
    }*/
    
    .#{$type2Base}-body-label {
      clip-path: polygon(0% 5%, 100% 100%, 100% 100%, 0% 100%);
      background: rgba($type2BaseColor,0.2);
    }    
  }

}

/* Basic styling for pen */
.penTitle {
  text-align:center;
  margin-top:1em;
  margin-bottom:1em;
  color:lighten(#000, 8%);
}