<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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="stepwizard"> <div class="stepwizard-row setup-panel"> <div class="stepwizard-step col-xs-3"> <a href="#step-1" type="box" class="box">New Listing</a> <p class="mr-5"><small> New Listing</small></p> <a class="block" href="mylink"> <div class="parent"> <article class="thumb" thumb="thumb"> <div class="movable" thumb-moveable="thumb-moveable"> <div class="layers"> <h1> <span>New Listing</span><br/></h1> </div> </div> </div> </article> </div> </div> <div class="stepwizard-step col-xs-3"> <a href="#step-2" type="box" class="box" disabled="disabled">Open House</a> <p><small>Open House</small></p> </div> <div class="stepwizard-step col-xs-3"> <a href="#step-3" type="box" class="box" disabled="disabled">Just Sold</a> <p><small>Just Sold</small></p> </div> </div> </div> <aside id="background"> <section id="content"> <article class="thumb" thumb="thumb"> <div class="movable" thumb-moveable="thumb-moveable"> <div class="layers"> <div class="layer one" thumb-layer-one="thumb-layer-one"></div> <div class="layer two" thumb-layer-two="thumb-layer-two"></div> <div class="layer three" thumb-layer-three="thumb-layer-three"> <h1> <span>New Listing</span><br/></h1> </div> </div> </div> </article> <article class="thumb" thumb="thumb"> <div class="movable" thumb-moveable="thumb-moveable"> <div class="layers"> <div class="layer one" thumb-layer-one="thumb-layer-one"></div> <div class="layer two" thumb-layer-two="thumb-layer-two"></div> <div class="layer three" thumb-layer-three="thumb-layer-three"> <h1> <span> Open House</span><br/></h1> </div> </div> </div> </article> <article class="thumb" thumb="thumb"> <div class="movable" thumb-moveable="thumb-moveable"> <div class="layers"> <div class="layer one" thumb-layer-one="thumb-layer-one"></div> <div class="layer two" thumb-layer-two="thumb-layer-two"></div> <div class="layer three" thumb-layer-three="thumb-layer-three"> <h1> <span> Just Sold</span><br/></h1> </div> </div> </div> </article> </section> </aside> <script> (function() { var AppleTvOs; AppleTvOs = (function() { function AppleTvOs(thumbElement) { var i, len, thumb, thumbs; this.thumbElement = thumbElement; console.log("Apple TV UI started!"); this.settings = {}; this.settings.boundsX = 10; this.settings.boundsY = 60; this.settings.intensityX = .5; this.settings.intensityY = .1; this.settings.animationSpeed = .6; thumbs = document.querySelectorAll("[" + this.thumbElement + "]"); for (i = 0, len = thumbs.length; i < len; i++) {if (window.CP.shouldStopExecution(1)){break;} thumb = thumbs[i]; this.listener(thumb); } window.CP.exitedLoop(1); } AppleTvOs.prototype.listener = function(elem) { var background; background = elem.querySelector("[" + this.thumbElement + "-moveable]"); elem.addEventListener("mousemove", (function(_this) { return function(event) { return _this.calculateAnimation(event, elem, background); }; })(this)); return elem.addEventListener("mouseleave", (function(_this) { return function() { _this.animateHorizontal(background, 0); return _this.animateVertical(background, 0); }; })(this)); }; AppleTvOs.prototype.calculateAnimation = function(event, elem, background) { var degreesX, degreesY; degreesX = event.offsetX - (elem.offsetWidth / 2); degreesY = event.offsetY - (elem.offsetHeight / 2); if (degreesX > (this.settings.boundsX * -1) && degreesX < this.settings.boundsX) { this.animateHorizontal(background, degreesX * this.settings.intensityX); } if (degreesX < (this.settings.boundsX * -1)) { this.animateHorizontal(background, this.settings.boundsX * this.settings.intensityX * -1); } if (degreesX > this.settings.boundsX) { this.animateHorizontal(background, this.settings.boundsX * this.settings.intensityX); } if (degreesY > (this.settings.boundsY * -1) && degreesY < this.settings.boundsY) { this.animateVertical(background, degreesY * this.settings.intensityY); } if (degreesY < (this.settings.boundsY * -1)) { this.animateVertical(background, this.settings.boundsY * this.settings.intensityY * -1); } if (degreesY > this.settings.boundsY) { return this.animateVertical(background, this.settings.boundsY * this.settings.intensityY); } }; AppleTvOs.prototype.animateHorizontal = function(elem, value) { var layerOne, layerThree, layerTwo; layerOne = elem.querySelector("[" + this.thumbElement + "-layer-one]"); layerTwo = elem.querySelector("[" + this.thumbElement + "-layer-two]"); layerThree = elem.querySelector("[" + this.thumbElement + "-layer-three]"); TweenMax.to(elem, this.settings.animationSpeed, { rotationY: value }); TweenMax.to(layerOne, this.settings.animationSpeed, { x: value }); TweenMax.to(layerTwo, this.settings.animationSpeed, { x: value / 1.5 }); return TweenMax.to(layerThree, this.settings.animationSpeed, { x: value / 2 }); }; AppleTvOs.prototype.animateVertical = function(elem, value) { var layerOne, layerThree, layerTwo; layerOne = elem.querySelector("[" + this.thumbElement + "-layer-one]"); layerTwo = elem.querySelector("[" + this.thumbElement + "-layer-two]"); layerThree = elem.querySelector("[" + this.thumbElement + "-layer-three]"); TweenMax.to(elem, this.settings.animationSpeed, { rotationX: value }); TweenMax.to(layerOne, this.settings.animationSpeed, { y: value * 2 }); TweenMax.to(layerTwo, this.settings.animationSpeed, { y: value }); return TweenMax.to(layerThree, this.settings.animationSpeed, { y: value / 1.5 }); }; return AppleTvOs; })(); document.addEventListener('DOMContentLoaded', function() { return new AppleTvOs("thumb"); }); }).call(this); </script>

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700); /* Variables */ /* Structure */ * { box-sizing: border-box; } #background { position: absolute; width: 100%; height: 100%; background: -webkit-linear-gradient(#f7f6ff, #cddee8); background: linear-gradient(#f7f6ff, #cddee8); z-index: 0; } #content { margin-top: 50px; display: flex; align-items: center; justify-content: center; } .thumb { width: 220px; height: 300px; float: left; margin: 0 20px; -webkit-perspective: 400px; perspective: 400px; } .thumb .movable { pointer-events: none; width: 100%; height: 100%; background-color: white; box-shadow: 0px 5px 50px rgba(0, 0, 0, 0.6); position: absolute; z-index: 3; top: 0; -webkit-perspective: 200px; perspective: 200px; border-radius: 5px; } .thumb .layers { width: 100%; height: 100%; position: absolute; z-index: 4; overflow: hidden; -webkit-perspective: 600px; perspective: 600px; border-radius: 5px; } .thumb .layer { background-size: cover; background-position: center center; width: 100%; height: 100%; position: absolute; z-index: 5; top: 0px; } .thumb .layer.one { -webkit-transform: scale(1.2); transform: scale(1.2); margin-top: -20px; background-image: url("http://34.217.69.61/wp-content/uploads/2019/03/Copy-of-Untitled.png"); } .thumb .layer.two { background-position: center bottom; -webkit-transform: scale(1.25); transform: scale(1.25); margin-left: 20px; margin-top: -30px; background-size: 100% auto; background-repeat: no-repeat; background-image: url("http://34.217.69.61/wp-content/uploads/2019/03/Copy-of-Untitled.png"); } .thumb .layer.three { -webkit-transform: scale(1.6); transform: scale(1.6); padding-top: 80px; text-align: center; color: white; font-family: "Oswald", serif; } .thumb .layer.three h1 { font-size: 11px; line-height: 18px; font-family: 'Pacifico', cursive; text-transform: uppercase; letter-spacing: 2px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); } .thumb .layer.three h2 { font-size: 6px; line-height: 18px; font-weight: 100; text-transform: uppercase; letter-spacing: 2px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05); } .parent{ position: relative; } .block{ display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }