<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 ----------> <nav class="black-gradient"> <div id="left-arrow" class="black-gradient"> <span></span> </div> <!--left-arrow--> <div id="carousel"> <section class="container"> <div id="card"> <figure class="front bravo"></figure> <figure class="top bravo"></figure> </div> <div id="card-info"> <h1>Johnny Bravo</h1> </div> </section> <!--end of section--> <section class="container"> <div id="card" class="flipped"> <figure class="front dexter"></figure> <figure class="top dexter"></figure> </div> <div id="card-info"> <h1>Dexter</h1> </div> </section> <!--end of section--> <!--end of section--> <section class="container"> <div id="card" class="flipped"> <figure class="front edd"></figure> <figure class="top edd"></figure></div><div id="card-info"> <h1>Ed, Edd & Eddy</h1> </div> </section> <!--end of section--> <!--end of section--> <section class="container"> <div id="card" class="flipped"> <figure class="front gumball"></figure> <figure class="top gumball"></figure> </div> <div id="card-info"> <h1>The Amazing World of Gumball</h1> </div> </section> <!--end of section--> <!--end of section--> <section class="container"> <div id="card" class="flipped"> <figure class="front ppg"></figure> <figure class="top ppg"></figure> </div> <div id="card-info"> <h1>Power Puff Girls</h1> </div> </section> <!--end of section--> <!--end of section--> <section class="container"> <div id="card" class="flipped"> <figure class="front regularshow"></figure> <figure class="top regularshow"></figure> </div> <div id="card-info"> <h1>Regular Show</h1> </div> </section> <!--end of section--> <!--end of section--> <section class="container"> <div id="card" class="flipped"> <figure class="front scooby"></figure> <figure class="top scooby"></figure> </div> <div id="card-info"> <h1>Scooby Doo</h1> </div> </section> <!--end of section--> <!--end of section--> <section class="container"> <div id="card" class="flipped"> <figure class="front starwars"></figure> <figure class="top starwars"></figure> </div> <div id="card-info"> <h1>Star Wars: The Clone Wars</h1> </div> </section> <!--end of section--> <!--end of section--> <section class="container"> <div id="card" class="flipped"> <figure class="front finn"></figure> <figure class="top finn"></figure> </div> <div id="card-info"> <h1>Adventure Time</h1> </div> </section> <!--end of section--> <!--right-arrow--> </div> <div id="right-arrow" class="black-gradient"> <span></span> </div> </nav> <script> var timerId; $('#left-arrow').hover(function () { timerId = setInterval(function () { $('#carousel').css('left', '+=5px'); }, 25); }, function () { clearInterval(timerId); }); $('#right-arrow').hover(function () { timerId = setInterval(function () { $('#carousel').css('left', '-=5px'); }, 25); }, function () { clearInterval(timerId); }); </script>

body {background-color:#74AFDA;} * {box-sizing:border-box} nav {width:600px;height:70px;border:solid 3px black;margin: 100px auto;position:relative;overflow:hidden;padding:0px;} nav div#carousel {position:relative;width:200%;left:0;} nav #left-arrow {width:50px;height:70px;position:absolute;left:0;background-color:#000;z-index:999;} nav #right-arrow {width:50px;height:70px;position:absolute;right:0;background-color:#000;z-index:999;} .container { height: 70px; min-width:70px; position: relative; float:left; -webkit-perspective: 1000; background-color:#000; } #card { width: 70px; height: 70px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform .2s; } .container:last-child { border-right:solid px black; } #card-info {float:left;width:0px;height:35px;overflow:hidden;-webkit-transition:all .5s; background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(32,124,202,1) 47%, rgba(125,185,232,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(47%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(32,124,202,1) 47%,rgba(125,185,232,1) 100%); background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(32,124,202,1) 47%,rgba(125,185,232,1) 100%); background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(32,124,202,1) 47%,rgba(125,185,232,1) 100%);} #card figure { display: block; position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; margin:0; } #card .front { border-left:solid 3px black; border-right:solid 3px black; -webkit-transform: rotateY(0deg) translateZ(35px); } #card .top { border-left:solid 3px black; border-right:solid 3px black; border-top:solid 3px black; border-bottom:solid 3px black; background-color: blue; -webkit-transform: rotateX(90deg) translateZ(35px);; } h1 {margin: 0 0 0 70px;font-family:Belgrano;color:white;text-transform:uppercase;font-size:14px;line-height:35px} .black-gradient {background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,1)), to(rgba(69,72,77,1)));background: -webkit-linear-gradient(rgba(0,0,0,1) 0%, rgba(69,72,77,1) 100%);background: -moz-linear-gradient(rgba(0,0,0,1) 0%, rgba(69,72,77,1) 100%);background: -o-linear-gradient(rgba(0,0,0,1) 0%, rgba(69,72,77,1) 100%);background: linear-gradient(rgba(0,0,0,1) 0%, rgba(69,72,77,1) 100%);} div#left-arrow span {background:url('http://assets.jamieburleigh.co.uk/experiments/images/arrow-left.png');width:50px;height:70px;display:block;} div#right-arrow span {background:url('http://assets.jamieburleigh.co.uk/experiments/images/arrow-right.png');width:50px;height:70px;display:block;z-index:999;} .front.bravo {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/bravo_0001s_0000_Layer.jpg')} .front.dexter {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/dexter_0002s_0000_Layer.jpg')} .front.edd {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/edd_0007s_0001_Layer.jpg')} .front.gumball {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/gumball_0006s_0000_Layer.jpg')} .front.ppg {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/ppg_0003s_0000_Layer.jpg')} .front.regularshow {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/regularshow_0005s_0000_Layer.jpg')} .front.scooby {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/scooby_0004s_0000_Layer.jpg')} .front.starwars {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/starwars_0000s_0000_Layer.jpg')} .front.finn {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/finn-front.jpg')} .top.bravo {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/bravo_0001s_0001_Layer.jpg')} .top.dexter {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/dexter_0002s_0001_Layer.jpg')} .top.edd {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/edd_0007s_0000_Layer.jpg')} .top.gumball {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/gumball_0006s_0001_Layer.jpg')} .top.ppg {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/ppg_0003s_0001_Layer.jpg')} .top.regularshow {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/regularshow_0005s_0001_Layer.jpg')} .top.scooby {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/scooby_0004s_0001_Layer.jpg')} .top.starwars {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/starwars_0000s_0001_Layer.jpg')} .top.finn {background: url('http://assets.jamieburleigh.co.uk/experiments/images/cartoons/finn-back.jpg')} .container:hover > #card-info {width:250px;} .container:hover > #card {-webkit-transform: translateZ(35px) rotateX(-90deg);}