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