<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="ze-card-full-wrap"> <div class="ze-card-invi-wrap"> <div class="ze-card-ze-bg" style="background-image: url(https://images.unsplash.com/photo-1477420086945-b99c643e8a3d?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=);"> </div> <div class="ze-card"> <div class="ze-title">Shambhala</div> <div class="ze-description">Interactively incentivize value-added opportunities before standardized relationships.</div> <div class="ze-img-w" style="background-image: url(https://images.unsplash.com/photo-1477420086945-b99c643e8a3d?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=);"> </div> </div> </div> <div class="ze-card-invi-wrap"> <div class="ze-card-ze-bg" style="background-image: url(https://images.unsplash.com/photo-1464305795204-6f5bbfc7fb81?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=);"></div> <div class="ze-card"> <div class="ze-title">Berries</div> <div class="ze-description">Interactively incentivize value-added opportunities before standardized relationships.</div> <div class="ze-img-w" style="background-image: url(https://images.unsplash.com/photo-1464305795204-6f5bbfc7fb81?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=);"> </div> </div> </div> <div class="ze-card-invi-wrap"> <div class="ze-card-ze-bg" style="background-image: url(https://images.unsplash.com/photo-1452421822248-d4c2b47f0c81?dpr=1&auto=format&fit=crop&w=1500&h=1125&q=80&cs=tinysrgb&crop=);"></div> <div class="ze-card"> <div class="ze-title">Wanderlust</div> <div class="ze-description">Interactively incentivize value-added opportunities before standardized relationships.</div> <div class="ze-img-w" style="background-image: url(https://images.unsplash.com/photo-1452421822248-d4c2b47f0c81?dpr=1&auto=format&fit=crop&w=1500&h=1125&q=80&cs=tinysrgb&crop=);"> </div> </div> </div> <script> var card = $(".ze-card"); $(document).on("mousemove",function(e) { var ax = -($(window).innerWidth()/2- e.pageX)/70; var ay = ($(window).innerHeight()/2- e.pageY)/60; card.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)"); }); </script> </div>

body { perspective: 1000px; transform-style: preserve-3d; } .ze-card-full-wrap { display: flex; } .ze-card-invi-wrap { display: flex; cursor: pointer; width: 25%; margin: 50px auto; overflow: hidden; padding: 45px; padding-bottom: 100px; position: relative; perspective: 1000px; transform-style: preserve-3d; } .ze-card-invi-wrap:hover .ze-img-w { transform: translateZ(20px); } .ze-card-invi-wrap:hover .ze-img-w:after { top: 200%; } .ze-card-invi-wrap:hover .ze-title:after { width: 90%; } .ze-card-ze-bg { position: absolute; left: 0; top: 0; right: 0; height: 100%; opacity: 0.05; background-size: cover; backgound-repeat: no-repeat; background-position: center; } .ze-card { max-width: 320px; padding: 25px; padding-bottom: 255px; background: #fff; border-radius: 3px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 3px 5px rgba(0, 0, 0, 0.05); position: relative; transform-style: preserve-3d; perspective: 1000px; z-index: 5; } .ze-card .ze-img-w { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); position: absolute; bottom: -60px; right: -55px; width: 100%; height: 300px; border-radius: 9px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; transform-style: preserve-3d; transform: translateZ(15px); transition: all 0.5s; } .ze-card .ze-img-w:after { content: ''; position: absolute; background: #fff; width: 250%; height: 100%; top: -200%; left: -70%; transform: rotateZ(-45deg); opacity: 0.2; transition: all 0.5s; } .ze-card .ze-title { font-size: 38px; font-style: italic; font-weight: bold; margin-bottom: 5px; position: relative; left: 15px; top: 8px; transform-style: preserve-3d; transform: translateZ(25px); } .ze-card .ze-title:after { content: ''; position: absolute; left: -8px; bottom: 3px; width: 0; height: 10px; background: lightskyblue; z-index: -1; transition: all 0.5s; } .ze-card .ze-description { font-family: Verdana, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 15px; opacity: 0.4; position: relative; left: 8px; top: 5px; transform-style: preserve-3d; transform: translateZ(5px); }

<script