"grid mobile"
Bootstrap 3.3.0 Snippet by evarevirus

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(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);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard PRO
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Pinterest-like Responsive Grid

Questions / Comments: