"grid mobile"
Bootstrap 3.3.0 Snippet by evarevirus

<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 id="gallery" class="cf"> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/abstract"> <div class="gallery-caption"> <h2>abstract</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/city"> <div class="gallery-caption"> <h2>city</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/people"> <div class="gallery-caption"> <h2>people</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/transport"> <div class="gallery-caption"> <h2>transport</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/animals"> <div class="gallery-caption"> <h2>animals</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/food"> <div class="gallery-caption"> <h2>food</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/nature"> <div class="gallery-caption"> <h2>nature</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/nightlife"> <div class="gallery-caption"> <h2>nightlife</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/sports"> <div class="gallery-caption"> <h2>sports</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/cats"> <div class="gallery-caption"> <h2>cats</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/fashion"> <div class="gallery-caption"> <h2>fashion</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/technics"> <div class="gallery-caption"> <h2>technics</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/animals"> <div class="gallery-caption"> <h2>animals</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/food"> <div class="gallery-caption"> <h2>food</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/nature"> <div class="gallery-caption"> <h2>nature</h2> </div> </a> <a href="#" class="gallery-slide"> <img src="http://lorempixel.com/300/300/nightlife"> <div class="gallery-caption"> <h2>nightlife</h2> </div> </a> </div>
.cf:before, .cf:after { content: " "; display: table; }.cf:after { clear: both; } *,*:after,*:before{transition: all 0.5s ease;} img { max-width: 100%; height: auto; } body{background:black;} #gallery { width: 100%; max-width: 500px; margin: 0 auto; position: relative; font-family: Verdana; } #gallery .gallery-caption { color: white; background-color: rgba(255,255,255,0); border-radius: 50%; text-align: center; position: absolute; top: 100%; left: 5%; width: 90%; height: 90%; margin: 0 auto; text-shadow: -1px 1px 0 black, -2px 2px 0 black; text-transform:uppercase; } #gallery .gallery-slide:hover .gallery-caption { top: 5%; } #gallery .gallery-slide { margin: 0; padding: 0; float: left; width: 100%; max-width: 300px; position: relative; overflow: hidden; } #gallery .gallery-slide:after { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } #gallery:hover .gallery-slide:after{ background: rgba(0,0,0,0.5); } #gallery .gallery-slide:hover:after { background: transparent; } #gallery .gallery-slide:hover img{ transform: scale(1.3) rotate(-10deg); } @media only screen and (min-width:480px){ #gallery .gallery-slide { width: 50%; } } @media only screen and (min-width:640px){ #gallery .gallery-slide { width: 25%; } } @media only screen and (min-width:767px){ #gallery { } }
$(document).ready(function(){ fitui(); }); $(window).resize(function(){ fitui(); }); function fitui(){ setTimeout(function(){ var winwid = $(window).width(), winhei = $(window).height(), gswid = $('.gallery-slide').outerWidth(), gshei = $('.gallery-slide').outerHeight(); $('.gallery-slide').outerHeight(gswid); $('#gallery').css('font-size',gswid * 0.09); $('.gallery-caption').css('line-height',gshei/2+'px'); },500); }

Related: See More


Questions / Comments: