<div class="ItemCard">
				<a class="ItemCard__dest cover" href="https://elements.envato.com/items/type/fonts/campfire-stories-font-duo-DH6LQG" target="_blank"></a>
				<figure class="ItemCard__thumb">
					<img src="https://tutsplus.github.io/how-to-create-an-isometric-layout-with-css-3d-transforms/images/018.png" height="340" width="510" alt="">
				</figure>
				<div class="ItemCard__layer cover"></div>
				<div class="ItemCard__summary cover">
					<span class="ItemCard__meta category">Fonts</span>
					<h2 class="ItemCard__title">Herbert Lemuel</h2>
					<address class="ItemCard__meta designer">August10</address>
				</div>
			</div>
body {
  padding: 20px;
  background: #f2f2f2;
}

html {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
figure {
	margin: 0;
}
img {
	max-width: 100%;
	height: auto;
}
.ItemCard {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: perspective(600px) translate3d(0, 0, 0);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  align-items: center;
  max-width: 510px;
  height: auto;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
}
.ItemCard .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ItemCard__dest {
  z-index: 30;
  display: block;
}
.ItemCard__thumb {
  position: relative;
  z-index: 3;
  padding: 0;
  transition: transform .2s;
}
.ItemCard__thumb img {
  display: block;
  transition: box-shadow 0.2s;
}
.ItemCard__layer {
  z-index: 10;
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
  background: #9d50bb;
  background: -moz-linear-gradient(120deg, #9d50bb 0%, #4096ee 100%);
  background: -webkit-linear-gradient(120deg, #9d50bb 0%, #4096ee 100%);
  background: linear-gradient(120deg, #9d50bb 0%, #4096ee 100%);
}
.ItemCard__summary {
  z-index: 20;
  padding: 25px;
  display: flex;
  flex-direction: column;
  transform: perspective(600px) translate3d(0, 100%, 0);
  text-align: center;
  color: #fff;
  justify-content: center;
}
.ItemCard__title {
  margin: 8px 0;
  font-weight: 900;
  transform: translate3d(0, 150px, 50px);
  text-transform: uppercase;
  color: #fff;
  font-size: 19px;
  line-height: 1.48;
}
@media screen and (max-width: 1050px) {
  .ItemCard__title {
    font-size: 24px;
  }
}
.ItemCard__meta.category {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  transform: translate3d(0, 150px, 40px);
  text-transform: uppercase;
  color: #f53794;
  font-size: 14px;
}
.ItemCard__meta.designer {
  font-style: italic;
  transform: translate3d(0, 150px, 20px);
  font-size: 12px;
}
.ItemCard__meta.designer:before {
  margin-right: 3px;
  content: 'by';
}
.ItemCard__title,
.ItemCard__meta {
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
}
/**
 * Hover state
 */
.ItemCard:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.ItemCard:hover .ItemCard__layer {
  opacity: .9;
}
.ItemCard:hover .ItemCard__summary {
  transform: translate3d(0, 0, 0);
}
.ItemCard:hover .ItemCard__title {
  transform: translate3d(0, 0, 50px);
}
.ItemCard:hover .ItemCard__meta.category {
  transform: translate3d(0, 0, 40px);
}
.ItemCard:hover .ItemCard__meta.designer {
  transition-delay: .05s;
  transform: translate3d(0, 0, 20px);
}
.ItemCard,
.ItemCard__summary {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
(function() {
  $( document )
    .on( "mousemove", ".ItemCard", function( event ) {

    var halfW = ( this.clientWidth / 2 );
    var halfH = ( this.clientHeight / 2 );

    var coorX = ( halfW - ( event.pageX - this.offsetLeft ) );
    var coorY = ( halfH - ( event.pageY - this.offsetTop ) );

    var degX  = ( ( coorY / halfH ) * 10 ) + 'deg'; // max. degree = 10
    var degY  = ( ( coorX / halfW ) * -10 ) + 'deg'; // max. degree = 10

    $( this ).css( 'transform', function() {

      return 'perspective( 600px ) translate3d( 0, -2px, 0 ) scale(1.1) rotateX('+ degX +') rotateY('+ degY +')';
    } )
      .children( '.ItemCard__summary' )
      .css( 'transform', function() {
      return 'perspective( 600px ) translate3d( 0, 0, 0 ) rotateX('+ degX +') rotateY('+ degY +')';
    } );
  } )
    .on( "mouseout", ".ItemCard", function() {
    $( this ).removeAttr( 'style' )
      .children( '.ItemCard__summary' )
      .removeAttr( 'style' );
  } );
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js