"card effect"
Bootstrap 3.0.0 Snippet by Thomanphan

<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; }

Related: See More


Questions / Comments: