<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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>
<script>
(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' );
} );
})();
</script>
body {
padding: 20px;
}
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;
}
