<html>
<head>
	<title>Photo Gallery</title>
	<link href="https://fonts.googleapis.com/css?family=Raleway:400,500i,700,800" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


	<link rel="stylesheet" type="text/css" href="css/gallery.css">
	<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body>


<div class="container">
<h1>Photo/Gallery</h1>
<hr>
	<div class="row">
		<div class="col-lg-4 col-sm-6">
			<div class="thumbnail img-responsive">
				<a href="#" title="Image 1"><img src="https://images.unsplash.com/photo-1494719019271-7bfff81660d2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=74496a215491b1529d6702f146901970&auto=format&fit=crop&w=500&q=60"> </a>
			</div>
		</div>
		<div class="col-lg-4 col-sm-6">
			<div class="thumbnail img-responsive">
				<a href="#" title="Image 1"><img src="https://images.unsplash.com/photo-1523357585206-175e971f2ad9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4d4e050da1c691f01f0643abe9cd5f94&auto=format&fit=crop&w=500&q=60"></a>
			</div>
		</div>
		<div class="col-lg-4 col-sm-6 ">
			<div class="thumbnail">
				<a href="#" title="Image 1"><img src="https://images.unsplash.com/photo-1523359366921-4c14294ff5bd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6010b5b8bc1f6916d652fb48b9e039a6&auto=format&fit=crop&w=500&q=60"></a>
			</div>
		</div>
		<div class="col-lg-4 col-sm-6">
			<div class="thumbnail img-responsive">
				<a href="#" title="Image 1"><img src="https://images.unsplash.com/photo-1523282310917-57c94215f54f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9562049492c4c1c28014be6b4d372fa8&auto=format&fit=crop&w=500&q=60"></a>
			</div>
		</div>
		<div class="col-lg-4 col-sm-6">
			<div class="thumbnail img-responsive">
				<a href="#" title="Image 1"><img src="https://images.unsplash.com/photo-1523279719030-9806e8392152?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=83ec2854d04d0f08312dec44bf645e2d&auto=format&fit=crop&w=500&q=60"></a>
			</div>
		</div>
		<div class="col-lg-4 col-sm-6">
			<div class="thumbnail img-responsive">
				<a href="#" title="Image 1"><img src="https://images.unsplash.com/photo-1523264629844-40dd6bf17c2b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c7ff0286ae72f4dfed2bfee5fc8a53fe&auto=format&fit=crop&w=500&q=60"></a>
			</div>
		</div>
		<div class="col-lg-4 col-sm-6">
			<div class="thumbnail img-responsive">
				<a href="#" title="Image 1"><img src="https://images.unsplash.com/photo-1523133892278-d324fa6b326b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1ba6e3178a138e7dcbdd241499378449&auto=format&fit=crop&w=500&q=60"></a>
			</div>
		</div>
		<div class="col-lg-4 col-sm-6">
			<div class="thumbnail img-responsive">
				<a href="#" title="Image 1"><img src="https://images.unsplash.com/photo-1523326350151-473dc3e5215b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=aa765415933dbcd55bc27e0726bfd1f5&auto=format&fit=crop&w=500&q=60"></a>
			</div>
		</div>
		<div class="col-lg-4 col-sm-6">
			<div class="thumbnail img-responsive">
				<a href="#" title="Image 1"><img src="https://images.unsplash.com/photo-1523086686757-5cda47c78492?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0da31c54dc3e5fd28da519b2cde2c98d&auto=format&fit=crop&w=500&q=60"></a>
			</div>
		</div>
	</div>
</div>
<div id="modal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
			</div>
			<div class="modal-body">
			</div>
		</div>
	</div>
</div>

<footer class="myFooter" id="footer-wrapper">
<div class="footer-icons">
      <a href="https://www.pinterest.com/" class="generic-anchor" target="_blank"><i class="fa fa-pinterest"></i></a>
      <a href="https://www.facebook.com/" class="generic-anchor" target="_blank"><i class="fa fa-facebook"></i></a>
      <a href="https://twitter.com/" class="generic-anchor" target="_blank"><i class="fa fa-twitter"></i></a>
      <a href="http://instagram.com/" class="generic-anchor" target="_blank"><i class="fa fa-instagram"></i></a>
      <a href="https://www.youtube.com/" class="generic-anchor" target="_blank"><i class="fa fa-youtube"></i></a>
      <a href="https://plus.google.com/" class="generic-anchor" target="_blank" ><i class="fa fa-google-plus"></i></a>
      </div>
  </section>
  <section class="footer-bottom">
<div class="footer-bottom-wrapper">   
<i class="fa fa-copyright" role="copyright"></i> 2018 <a href="https://codepen.io/pa_patki/"><strong>pa_patki</strong></a> <span class="footer-bottom-rights"> - All Rights Reserved - </span>
    </div>
  </section>
</footer>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>
</body>
</html>

.container h1 {
	font-family: 'Raleway';
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -1px;
	font-size: 50px;
}
hr {
	border: 0;
    height: 3px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.thumbnail {
	margin-bottom:6px;
  display:flex;
  flex-wrap: wrap;
}

    
.blur {
    transform: scale(0.9);
    opacity: 0.6;
  	-webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

.myFooter {
	display: flex;
  	flex-flow: row wrap;
}

footer {
	background: #000;
	font-family: 'Raleway', sans-serif;
	color: rgb(0, 0, 0);
	max-width: 100%;
	margin-top: auto;
}


.footer-icons {
	text-align: center;
	font-size: 20px;
	letter-spacing: 5px;
	width: 100%;
  	align-items: center;
  	justify-content: space-around;
  	position: relative;
  	margin-top: 15px;
}

.footer-bottom {
	text-align: center;
	color: white;
	width: 100%;
  	align-items: center;
  	justify-content: space-around;
  	position: relative;
  	margin-top: 10px;
  	margin-bottom: 10px;
}
a {
	text-decoration: none;
}
a:visited, a:focus{
	color: white;
}

footer a:hover {
	color: rgba(255, 255, 255, 0.6);
}
$('.thumbnail').click(function(){
	$('.modal-body').empty();
	$($(this).parents('div').html()).appendTo('.modal-body');
	$('#modal').modal({show:true});
});

$('#modal').on('show.bs.modal', function () {
   $('.col-6,.row .thumbnail').addClass('blur');
})

$('#modal').on('hide.bs.modal', function () {
   $('.col-6,.row .thumbnail').removeClass('blur');
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.