<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="gallery clear">
<div class="bg" style="background-image: url(https://images.pexels.com/photos/1125273/pexels-photo-1125273.jpeg?cs=srgb&dl=abstract-art-blur-1125273.jpg&fm=jpg);"></div>
<div class="bg" style="background-image: url(https://images.pexels.com/photos/834894/pexels-photo-834894.jpeg?cs=srgb&dl=background-blur-bokeh-834894.jpg&fm=jpg);"></div>
<div class="bg" style="background-image: url(https://images.pexels.com/photos/599459/pexels-photo-599459.jpeg?cs=srgb&dl=architecture-buildings-city-599459.jpg&fm=jpg);"></div>
<div class="bg" style="background-image: url(https://images.pexels.com/photos/940380/pexels-photo-940380.jpeg?cs=srgb&dl=dawn-dusk-evening-940380.jpg&fm=jpg);"></div>
<div class="bg" style="background-image: url(https://images.pexels.com/photos/1275393/pexels-photo-1275393.jpeg?cs=srgb&dl=float-floating-globe-1275393.jpg&fm=jpg);"></div>
<div class="bg" style="background-image: url(https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg?cs=srgb&dl=cold-daylight-desktop-backgrounds-1287145.jpg&fm=jpg);"></div>
<div class="bg" style="background-image: url(https://images.pexels.com/photos/1242764/pexels-photo-1242764.jpeg?cs=srgb&dl=alone-dawn-grass-1242764.jpg&fm=jpg);"></div>
<div class="bg" style="background-image: url(https://images.pexels.com/photos/546913/pexels-photo-546913.jpeg?cs=srgb&dl=bridge-hanging-outdoors-546913.jpg&fm=jpg);"></div>
</div>
@import url('https://fonts.googleapis.com/css?family=Anton');
*. :after, :before {
box-sizing: border-box;
}
.clear:after, .clear:before {
content: '';
display: table;
clear: both;
}
.gallery {
display: flex;
flex-wrap: wrap;
border: 10px solid #fff;
width: calc(100% - 50px);
margin: 60px auto 0;
}
.gallery a {
display: block;
text-decoration: none;
width: 25%;
overflow: hidden;
outline: none;
}
.gallery a img {
height: 100%;
transform: scale(1,1);
transition: all 300ms ease;
}
.gallery a img:hover {
transform: scale(1.1,1.1);
}
h1 {
text-align: center;
font-size: 40px;
font-family: 'Anton', sans-serif;
letter-spacing: 10px;
color: #fff;
text-transform: uppercase;
}
.bg {
width: 100%;
height: 200px;
background-size: cover;
transform: scale(1,1);
transition: all 300ms ease;
}
.bg:hover {
transform: scale(1.1,1.1);
}
@media(max-width: 991px) {
.gallery a {
width: 50%;
}
}
@media(max-width: 767px) {
.gallery a {
width: 100%;
}
.bg {
height: 300px;
}
}
h1 a {
color: #000;
}
$(document).ready(function(){
$('.gallery > div.bg').each(function(){
$(this).wrapAll('<a href="" data-fancybox="gallery"></a>');
});
$('.gallery a').each(function(){
var link = $(this).children('.bg').css('background-image');
console.log(link);
link = link.replace(/(url\(|\)|")/g,'');
$(this).attr('href', link);
});
$("[data-fancybox]").fancybox({
loop: true,
buttons: [
"zoom",
"share",
"slideShow",
"fullScreen",
"download",
"thumbs",
"close"
]
});
});
