<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);
}
