<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<h1 class="title">Flip Menu. Clickable/Responsive/Pure CSS</h1>
<p class="creds">Created by <a target="_blank" href="https://twitter.com/fornyhucker">fornyhucker</a></p>
<div class="flip-menu">
<section class="flip-item-wrap">
<img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt="">
<input type="checkbox" class="flipper" id="a">
<label for="a" class="flip-item">
<figure class="front"><img src="http://lorempixel.com/500/500/food/1" alt=""></img></figure>
<figure class="back">
<img src="http://lorempixel.com/g/500/500/food/1" alt=""></img>
<div class="flip-item-desc">
<h4 class="flip-item-title">Lorem ipsum dolor</h4>
<p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
</div>
</figure>
</label>
</section>
<section class="flip-item-wrap">
<img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt="">
<input type="checkbox" class="flipper" id="b">
<label for="b" class="flip-item">
<figure class="front"><img src="http://lorempixel.com/500/500/food/2" alt=""></img></figure>
<figure class="back">
<img src="http://lorempixel.com/g/500/500/food/2" alt=""></img>
<div class="flip-item-desc">
<h4 class="flip-item-title">Lorem ipsum dolor</h4>
<p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
</div>
</figure>
</label>
</section>
<section class="flip-item-wrap">