Grid gallery using HTML CSS and Bootstrap. I am providing a source code in this blog.
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Freebie: 4 Bootstrap Gallery Templates</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
<link rel="stylesheet" href="gallery-grid.css">
</head>
<body>
<div class="container gallery-container">
<h1>Bootstrap 3 Gallery</h1>
<p class="page-description text-center">Grid Layout With Zoom Effect</p>
<div class="tz-gallery">
<div class="row">
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/park.jpg">
<img src="../images/park.jpg" alt="Park">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/bridge.jpg">
<img src="../images/bridge.jpg" alt="Bridge">
</a>
</div>
<div class="col-sm-12 col-md-4">
<a class="lightbox" href="../images/tunnel.jpg">
<img src="../images/tunnel.jpg" alt="Tunnel">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/coast.jpg">
<img src="../images/coast.jpg" alt="Coast">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/rails.jpg">
<img src="../images/rails.jpg" alt="Rails">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/traffic.jpg">
<img src="../images/traffic.jpg" alt="Traffic">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/rocks.jpg">
<img src="../images/rocks.jpg" alt="Rocks">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/benches.jpg">
<img src="../images/benches.jpg" alt="Benches">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/sky.jpg">
<img src="../images/sky.jpg" alt="Sky">
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.tz-gallery');
</script>
</body>
</html>
CSS code:
body {
background-image: linear-gradient(to top, #ecedee 0%, #eceeef 75%, #e7e8e9 100%);
min-height: 100vh;
font: normal 16px sans-serif;
padding: 60px 0;
}
.container.gallery-container {
background-color: #fff;
color: #35373a;
min-height: 100vh;
border-radius: 20px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}
.gallery-container h1 {
text-align: center;
margin-top: 70px;
font-family: 'Droid Sans', sans-serif;
font-weight: bold;
}
.gallery-container p.page-description {
text-align: center;
max-width: 800px;
margin: 25px auto;
color: #888;
font-size: 18px;
}
.tz-gallery {
padding: 40px;
}
.tz-gallery .lightbox img {
width: 100%;
margin-bottom: 30px;
transition: 0.2s ease-in-out;
box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}
.tz-gallery .lightbox img:hover {
transform: scale(1.05);
box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}
.tz-gallery img {
border-radius: 4px;
}
.baguetteBox-button {
background-color: transparent !important;
}
@media(max-width: 768px) {
body {
padding: 0;
}
.container.gallery-container {
border-radius: 0;
}
}
Comments
Post a Comment