<section>
  <div id="superman" class="card rounded">
    <div class="card__overlay">
    </div>
    <!-- <div class="card__image">
      <img src="" alt=""/> 
    </div> --> 
		<div class="card__heading">
      <span class="small">Hover</span>
			<h2>Superman</h2>
		</div>
  </div>
  <div id="batman" class="card rounded">
    <div class="card__overlay">
    </div>
		<div class="card__heading">
      <span class="small">Hover</span>
			<h2>Batman</h2>
		</div>
  </div>
  <div id="wonderwoman" class="card rounded">
    <div class="card__overlay">
    </div>
		<div class="card__heading">
      <span class="small">Hover</span>
			<h2>Wonder Woman</h2>
		</div>
  </div>
  <div id="aquaman" class="card rounded">
    <div class="card__overlay">
    </div>
		<div class="card__heading">
      <span class="small">Hover</span>
			<h2>Aquaman</h2>
		</div>
  </div>
</section>

body {
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

section {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  @media (min-width: 45em) {
    flex-wrap: nowrap;
  }
}

.card {
  position: relative;
  width: 250px;
	height: 250px;
  margin: 10px;
	background: #CCC;
  transform: rotateX(0) rotateY(0);
	transform-style: preserve-3d;
  transition-duration: 0.1s;
  transition-timing-function: ease !important;
  backface-visibility: hidden;
  will-change: tranform;
  &__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(http://alexandrebuffet.fr/codepen/parallax-cards/blur-overlay.jpg) no-repeat center center;
    background-size: cover;
    mix-blend-mode: lighten;
    opacity: 0.5;
  }
  &__image {
    img {
      max-width: 100%;
      height: auto;
      mix-blend-mode: lighten;
    }
  }
  &__heading {
    position: absolute;
    bottom: 20px; 
    left: 20px;
    width: 100%;
    color: #FFF;
    .small {
      display: inline-block;
      margin-bottom: 5px;
      text-transform: uppercase;
      font-size: 10px;
      transform: translateZ(15px);
    }
    h2 {
      margin: 0;
      transform: translateZ(30px);
    }
  }
  &.rounded {
    &, .card__overlay {
      border-radius: 8px;
    }
  }
  &.is-out {
    transform: rotateX(0) rotateY(0) !important;
    transition-duration: 1s;
  }
}

#superman {
 background-color: #3F51B5;
}

#batman {
 background-color: #424242;
}

#wonderwoman {
  background-color: #E91E63;
}

#aquaman {
  background-color: #00BCD4;
}

/*
**
** A pen by Alex Buffet
** https://alexandrebuffet.fr
**
**
*/

;(function ( $ ) {
  //Make your content a heroe
  $.fn.tilt = function() {
      //Variables
      var perspective = '500px',
      delta = 20,
      width = this.width(),
      height = this.height(),
      midWidth = width / 2,
      midHeight = height / 2;
      //Events
      this.on({
      	mousemove: function(e) {
      		var pos = $(this).offset(),
      		cursPosX = e.pageX - pos.left,
      		cursPosY = e.pageY - pos.top,
      		cursCenterX = midWidth - cursPosX,
      		cursCenterY = midHeight - cursPosY;

      		$(this).css('transform','perspective(' + perspective + ') rotateX('+ (cursCenterY / delta) +'deg) rotateY('+ -(cursCenterX / delta) +'deg)');
      		$(this).removeClass('is-out');
      	},
      	mouseleave: function() {
      		$(this).addClass('is-out');
      	}
      });
      //Return
      return this;
  };
}( jQuery ));

//Set plugin on cards
$('.card').tilt();