<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 ----------> <div class="container"> <div class="row"> <h2>Bootstrap Flip Thumbnails</h2> <div class="col-xs-6 col-md-3"> <div class="bs-flipper thumbnail" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <img data-src="holder.js/100%x180" alt="100%x180" src="http://icons.iconarchive.com/icons/simekonelove/modern-web/256/facebook-icon.png" data-holder-rendered="true" style="height: 256px; width: 100%; display: block;"> </div> <div class="back"> <img data-src="holder.js/100%x180" alt="100%x180" src="https://cdn1.iconfinder.com/data/icons/metro-uinvert-dock/256/Share_alt_1.png" data-holder-rendered="true" style="height: 256px; width: 100%; display: block;"> </div> </div> </div> </div> <!-- 2 --> <div class="col-xs-6 col-md-3"> <div class="bs-flipper thumbnail" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <img data-src="holder.js/100%x180" alt="100%x180" src="http://icons.iconarchive.com/icons/simekonelove/modern-web/256/digg-icon.png" data-holder-rendered="true" style="height: 256px; width: 100%; display: block;"> </div> <div class="back"> <img data-src="holder.js/100%x180" alt="100%x180" src="https://cdn1.iconfinder.com/data/icons/metro-uinvert-dock/256/Share_alt_1.png" data-holder-rendered="true" style="height: 256px; width: 100%; display: block;"> </div> </div> </div> </div> <!-- 3--> <div class="col-xs-6 col-md-3"> <div class="bs-flipper thumbnail" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <img data-src="holder.js/100%x180" alt="100%x180" src="http://icons.iconarchive.com/icons/simekonelove/modern-web/256/twitter-icon.png" data-holder-rendered="true" style="height: 256px; width: 100%; display: block;"> </div> <div class="back"> <img data-src="holder.js/100%x180" alt="100%x180" src="https://cdn1.iconfinder.com/data/icons/metro-uinvert-dock/256/Share_alt_1.png" data-holder-rendered="true" style="height: 256px; width: 100%; display: block;"> </div> </div> </div> </div> <!-- 4--> <div class="col-xs-6 col-md-3"> <div class="bs-flipper thumbnail" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <img data-src="holder.js/100%x180" alt="100%x180" src="http://icons.iconarchive.com/icons/simekonelove/modern-web/256/Google-plus-grey-icon.png" data-holder-rendered="true" style="height: 256px; width: 100%; display: block;"> </div> <div class="back"> <img data-src="holder.js/100%x180" alt="100%x180" src="https://cdn1.iconfinder.com/data/icons/metro-uinvert-dock/256/Share_alt_1.png" data-holder-rendered="true" style="height: 256px; width: 100%; display: block;"> </div> </div> </div> </div> </div> </div>

.bs-flipper { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; perspective: 1000; border: 1px solid #ccc; } .bs-flipper:hover .flipper, .bs-flipper.hover .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .bs-flipper, .front, .back { width: 100%; height: 266px; } .flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -moz-transition: 0.6s; -moz-transform-style: preserve-3d; -o-transition: 0.6s; -o-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; } .front { z-index: 2; } .back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); background: #f8f8f8; } .front .name { font-size: 2em; display: inline-block; background: rgba(33, 33, 33, 0.9); color: #f8f8f8; font-family: Courier; padding: 5px 10px; border-radius: 5px; bottom: 60px; left: 25%; position: absolute; text-shadow: 0.1em 0.1em 0.05em #333; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg); }