<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>
<!------ Include the above in your HEAD tag ---------->
<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=""><!-- this image will add height to parent element -->
<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=""><!-- this image will add height to parent element -->
<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">
<img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
<input type="checkbox" class="flipper" id="c">
<label for="c" class="flip-item">
<figure class="front"><img src="http://lorempixel.com/500/500/food/3" alt=""></img></figure>
<figure class="back">
<img src="http://lorempixel.com/g/500/500/food/3" 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=""><!-- this image will add height to parent element -->
<input type="checkbox" class="flipper" id="d">
<label for="d" class="flip-item">
<figure class="front"><img src="http://lorempixel.com/500/500/food/4" alt=""></img></figure>
<figure class="back">
<img src="http://lorempixel.com/g/500/500/food/4" 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=""><!-- this image will add height to parent element -->
<input type="checkbox" class="flipper" id="e">
<label for="e" class="flip-item">
<figure class="front"><img src="http://lorempixel.com/500/500/food/5" alt=""></img></figure>
<figure class="back">
<img src="http://lorempixel.com/g/500/500/food/5" 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=""><!-- this image will add height to parent element -->
<input type="checkbox" class="flipper" id="f">
<label for="f" class="flip-item">
<figure class="front"><img src="http://lorempixel.com/500/500/food/6" alt=""></img></figure>
<figure class="back">
<img src="http://lorempixel.com/g/500/500/food/6" 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=""><!-- this image will add height to parent element -->
<input type="checkbox" class="flipper" id="g">
<label for="g" class="flip-item">
<figure class="front"><img src="http://lorempixel.com/500/500/food/7" alt=""></img></figure>
<figure class="back">
<img src="http://lorempixel.com/g/500/500/food/7" 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=""><!-- this image will add height to parent element -->
<input type="checkbox" class="flipper" id="h">
<label for="h" class="flip-item">
<figure class="front"><img src="http://lorempixel.com/500/500/food/8" alt=""></img></figure>
<figure class="back">
<img src="http://lorempixel.com/g/500/500/food/8" 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=""><!-- this image will add height to parent element -->
<input type="checkbox" class="flipper" id="j">
<label for="j" class="flip-item">
<figure class="front"><img src="http://lorempixel.com/500/500/food/9" alt=""></img></figure>
<figure class="back">
<img src="http://lorempixel.com/g/500/500/food/9" 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=""><!-- this image will add height to parent element -->
<input type="checkbox" class="flipper" id="k">
<label for="k" class="flip-item">
<figure class="front"><img src="http://lorempixel.com/500/500/food/10" alt=""></img></figure>
<figure class="back">
<img src="http://lorempixel.com/g/500/500/food/10" 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=""><!-- this image will add height to parent element -->
<input type="checkbox" class="flipper" id="l">
<label for="l" 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=""><!-- this image will add height to parent element -->
<input type="checkbox" class="flipper" id="m">
<label for="m" 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>
</div>
body{
margin:0;
font: 14px Helvetica, Arial, serif;
}
.title {
text-align: center;
color: #333;
font-size: 1.6em;
}
.creds {
text-align: center;
color: #666;
font-size: 0.85em;
}
.creds a {
color: #000;
text-decoration: none;
border-bottom: 1px dotted #000;
}
.flip-menu{
margin: 30px 0 0;
}
.flip-item-wrap{
width: 25%;
height: auto;
float: left;
position:relative;
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
-o-perspective:800px;
perspective:800px;
}
@media screen and (min-width: 1280px) {
.flip-item-wrap{
width: 16.6%;
}
}
@media screen and (max-width: 979px) {
.flip-item-wrap{
width: 33.3%;
}
}
@media screen and (max-width: 639px) {
.flip-item-wrap{
width: 50%;
}
}
@media screen and (max-width: 379px) {
.flip-item-wrap{
width: 100%;
}
}
.flip-item-wrap img{
width:100%;
height:auto;
display:block;
margin:0;
}
.flip-item-wrap input{
display: none;
}
.flip-item-wrap .fake-image{
visibility: hidden;
}
.flip-item{
display: block;
width:100%;
height:100%;
float:left;
position:absolute;
top:0;
left:0;
cursor:pointer;
color:#fff;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transition:-webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
.flip-item figure{
display:block;
position:absolute;
width:100%;
height:100%;
margin:0;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
.flip-item .back{
width:100%;
display:block;
margin:0;
-webkit-transform:rotateY( 180deg );
-moz-transform:rotateY( 180deg );
-ms-transform:rotateY( 180deg );
-o-transform:rotateY( 180deg );
transform:rotateY( 180deg );
}
.flipper:checked + .flip-item{
-webkit-transform:rotateY( 180deg );
-moz-transform:rotateY( 180deg );
-ms-transform:rotateY( 180deg );
-o-transform:rotateY( 180deg );
transform:rotateY( 180deg );
}
.flip-item-desc{
background: rgba(0,0,0,0.2);
width:90%;
height:90%;
padding:5%;
position:absolute;
top: 0;
left: 0;
text-shadow:1px 2px 1px rgba(0,0,0,0.9);
overflow:hidden;
}
.flip-item-title{
font-size: 1.5em;
margin: 1em 0 0.8em;
}
