<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 ---------->
<section class="top-movies">
<div class="section-content">
<h1 class='top-movies__title'>Top Movies</h1>
<article class="card">
<a href="#" class="card__link">
<span class="highlight"></span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/images.jpeg" alt="Mad Max: Fury Road" class="card__image" />
</a>
<h2 class='card__title'>Mad Max: Fury Road</h2>
</article>
<article class="card">
<a href="#" class="card__link">
<span class="highlight"></span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/images_(1).jpeg" alt="Avengers: Age of Ultron" class="card__image" />
</a>
<h2 class='card__title'>Avengers: Age of Ultron</h2>
</article>
<article class="card">
<a href="#" class="card__link">
<span class="highlight"></span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/images_(2).jpeg" alt="Furious 7" class="card__image" />
</a>
<h2 class='card__title'>Furious 7</h2>
</article>
</div>
</section>
<script>
$card = $( '.card' );
$card.on( 'mousemove', function( e ) {
var $this = $( this ),
eX = e.offsetX,
eY = e.offsetY,
dim = this.getBoundingClientRect();
w = dim.width/2,
h = dim.height/2,
tiltLimit = 15,
posX = ( h - eY ) * ( tiltLimit / h );
posY = ( w - eX ) * ( tiltLimit / w ) * -1;
$this.find( 'a' ).css({
'transform': 'rotateX( ' + posX + 'deg ) rotateY( ' + posY + 'deg )',
'box-shadow': ( posY * -1 ) + 'px ' + ( posX + 14 ) + 'px 34px 0 rgba( 0, 0, 0, 0.1 )'
});
$this.find( '.highlight' ).css({
'opacity': 1,
'transform': 'translate3d( ' + ( posX * -4 ) + 'px, ' + ( posY * -4 ) + 'px, ' + '0 )'
});
});
$card.mouseleave( function( e ) {
var $el = $( this ).find( 'a' );
$el.removeAttr( 'style' ).addClass( 'hover--ending' );
setTimeout( function() {
$el.removeClass( 'hover--ending' );
}, 500 );
$el.find( '.highlight' ).removeAttr( 'style' );
});
</script>
html {
background: #e9e9e4;
-webkit-font-smoothing: antialiased;
}
/*section*/
.top-movies {
font-size: 0;
background: #bfd5e0;
background: radial-gradient(400px at 50%, #d9dbd8 0%, #bfd5e0 100%);
padding: 45px 0;
box-shadow: inset 0 -5px 8px 0 rgba(0, 0, 0, 0.05);
font-family: system, -apple-system, ".SFNSDisplay-Regular", HelveticaNeue, LucidaGrande;
}
/*h1*/
.top-movies__title {
font-size: 22px;
color: #444e50;
margin: 0 0 14px;
text-shadow: 0 2px 1px rgba(255, 255, 255, 0.1);
}
.section-content {
width: 94%;
margin: 0 auto;
}
@media only screen and (min-width: 1022px) {
.section-content {
width: 100%;
max-width: 960px;
}
}
/*article*/
.card {
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.3);
position: relative;
width: 150px;
margin: 0 auto;
transition: box-shadow 0.15s ease-out, transform 0.25s ease;
perspective: 500px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
}
.card:hover {
transform: scale(1.1);
box-shadow: none;
}
.card.hover--ending {
transition: box-shadow 0.5s ease;
}
@media only screen and (min-width: 540px) {
.card {
display: inline-block;
}
}
.card + .card {
margin: 45px auto 0;
}
@media only screen and (min-width: 540px) {
.card + .card {
margin: 0 0 0 25px;
}
}
/*span*/
.highlight {
display: block;
position: absolute;
width: 100px;
height: 100px;
top: 0;
right: 0;
opacity: 0;
z-index: 3;
transition: opacity 0.25s ease;
background: radial-gradient(60px at 50%, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 100%);
}
/*a*/
.card__link {
display: block;
position: relative;
width: 150px;
height: 228px;
overflow: hidden;
transform-origin: center center;
transform-style: preserve-3d;
}
/*img*/
.card__image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
/*h2*/
.card__title {
font-size: 14px;
width: 100%;
height: 24px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
position: absolute;
left: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
opacity: 0;
transition: opacity 0.15s ease-in;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
/*article*/
}
.card:hover .card__title {
opacity: 0.8;
}
