Bootstrap Image Gallery with Zoom Effect

Bootstrap Grids: Bootstrap Image Gallery with Zoom Effect

Image gallery is one of the most popular features of websites. There are plenty of image galleries scripts that you can use for free, but why not to design your own one. With the following code script, you are able to easily create a web-based image gallery with bootstrap and adding zoom effect to it.

#Bootstrap Image Gallery Dynamic #Bootstrap Zoomable Image Gallery #HTML CSS Image Gallery Effect

<!-- this script got from www.frontendfreecode.com -->
<div class="container-fluid">
  <div id="content" class="row"></div>
</div>
<script id="template" type="text/x-handlebars-template">
  {{#gallery}}
    <div class="col-md-4 col-lg-3 col-xs-6 item nopadding">
      <div class="overflow">
        <div class="content-art">
          <h4>{{title}}</h4>
        </div>
        <img src="{{img}}" alt="{{alt}}" class="img-responsive"/>
      </div>
    </div>
  {{/gallery}}
</script><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>

@import url(https://fonts.googleapis.com/css?family=Ubuntu:700);
.item {
  cursor: pointer;
  -webkit-backface-visibility: hidden;
}
.item:hover > .overflow > .content-art {
  -webkit-transform: translateY(0) translateZ(0);
          transform: translateY(0) translateZ(0);
}

.overflow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.content-art {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  color: #fff;
  font-weight: 700 !important;
  text-align: center;
  text-shadow: 0 1px 1px #000;
  padding: 10px 15px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 100;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateY(100%) translateZ(0);
          transform: translateY(100%) translateZ(0);
  -webkit-transition: -webkit-transform 450ms ease-out;
  transition: -webkit-transform 450ms ease-out;
  transition: transform 450ms ease-out;
  transition: transform 450ms ease-out, -webkit-transform 450ms ease-out;
}

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

body {
  background: #1f253d;
  font-family: 'Ubuntu', sans-serif;
}

$(document).ready(function () {

  var data = { gallery: [
    { title: "She loved me, sometimes I also loved her", img: "http://frontendfreecode.com/codes/files/gallery-1.jpg", alt: "lorem" },
    { title: "I can write the saddest verses tonight", img: "http://frontendfreecode.com/codes/files/gallery-2.jpg", alt: "lorem" },
    { title: "My voice searched the wind to touch her ear", img: "http://frontendfreecode.com/codes/files/gallery-3.jpg", alt: "lorem" },
    { title: "My soul is not content with having lost it", img: "http://frontendfreecode.com/codes/files/gallery-4.jpg", alt: "lorem" },
    { title: "The night wind turns in the sky and sings", img: "http://frontendfreecode.com/codes/files/gallery-5.jpg", alt: "lorem" },
    { title: "The night is starry, and the blue stars shiver in the distance", img: "http://frontendfreecode.com/codes/files/gallery-6.jpg", alt: "lorem" },
    { title: "How not to have loved her great still eyes", img: "http://frontendfreecode.com/codes/files/gallery-7.jpg", alt: "lorem" },
    { title: "Of other. Will be from another. As before my kisses.", img: "http://frontendfreecode.com/codes/files/gallery-8.jpg", alt: "lorem" }] };


  var source = $('#template').html();
  var template = Handlebars.compile(source);
  $('#content').html(template(data));

});

$(window).load(function () {
  var $items = $('.item');
  $items.on({
    mousemove: function (e) {
      var $that = $(this);
      $that.find('.overflow > img').velocity({
        translateZ: 0,
        translateX: Math.floor(e.pageX - $that.offset().left - $that.width() / 2),
        translateY: Math.floor(e.pageY - $that.offset().top - $that.height() / 2),
        scale: '2' },
      {
        duration: 400,
        easing: 'linear',
        queue: false });

    },
    mouseleave: function () {
      $(this).find('.overflow > img').velocity({
        translateZ: 0,
        translateX: 0,
        translateY: 0,
        scale: '1' },
      {
        duration: 1000,
        easing: 'easeOutSine',
        queue: false });

    } });

});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js'></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Ubuntu:700);
.item {
  cursor: pointer;
  -webkit-backface-visibility: hidden;
}
.item:hover > .overflow > .content-art {
  -webkit-transform: translateY(0) translateZ(0);
          transform: translateY(0) translateZ(0);
}

.overflow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.content-art {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  color: #fff;
  font-weight: 700 !important;
  text-align: center;
  text-shadow: 0 1px 1px #000;
  padding: 10px 15px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 100;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateY(100%) translateZ(0);
          transform: translateY(100%) translateZ(0);
  -webkit-transition: -webkit-transform 450ms ease-out;
  transition: -webkit-transform 450ms ease-out;
  transition: transform 450ms ease-out;
  transition: transform 450ms ease-out, -webkit-transform 450ms ease-out;
}

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

body {
  background: #1f253d;
  font-family: 'Ubuntu', sans-serif;
}
</style>

</head>
<body>
<div class="container-fluid">
  <div id="content" class="row"></div>
</div>
<script id="template" type="text/x-handlebars-template">
  {{#gallery}}
    <div class="col-md-4 col-lg-3 col-xs-6 item nopadding">
      <div class="overflow">
        <div class="content-art">
          <h4>{{title}}</h4>
        </div>
        <img src="{{img}}" alt="{{alt}}" class="img-responsive"/>
      </div>
    </div>
  {{/gallery}}
</script>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
$(document).ready(function () {

  var data = { gallery: [
    { title: "She loved me, sometimes I also loved her", img: "http://frontendfreecode.com/codes/files/gallery-1.jpg", alt: "lorem" },
    { title: "I can write the saddest verses tonight", img: "http://frontendfreecode.com/codes/files/gallery-2.jpg", alt: "lorem" },
    { title: "My voice searched the wind to touch her ear", img: "http://frontendfreecode.com/codes/files/gallery-3.jpg", alt: "lorem" },
    { title: "My soul is not content with having lost it", img: "http://frontendfreecode.com/codes/files/gallery-4.jpg", alt: "lorem" },
    { title: "The night wind turns in the sky and sings", img: "http://frontendfreecode.com/codes/files/gallery-5.jpg", alt: "lorem" },
    { title: "The night is starry, and the blue stars shiver in the distance", img: "http://frontendfreecode.com/codes/files/gallery-6.jpg", alt: "lorem" },
    { title: "How not to have loved her great still eyes", img: "http://frontendfreecode.com/codes/files/gallery-7.jpg", alt: "lorem" },
    { title: "Of other. Will be from another. As before my kisses.", img: "http://frontendfreecode.com/codes/files/gallery-8.jpg", alt: "lorem" }] };


  var source = $('#template').html();
  var template = Handlebars.compile(source);
  $('#content').html(template(data));

});

$(window).load(function () {
  var $items = $('.item');
  $items.on({
    mousemove: function (e) {
      var $that = $(this);
      $that.find('.overflow > img').velocity({
        translateZ: 0,
        translateX: Math.floor(e.pageX - $that.offset().left - $that.width() / 2),
        translateY: Math.floor(e.pageY - $that.offset().top - $that.height() / 2),
        scale: '2' },
      {
        duration: 400,
        easing: 'linear',
        queue: false });

    },
    mouseleave: function () {
      $(this).find('.overflow > img').velocity({
        translateZ: 0,
        translateX: 0,
        translateY: 0,
        scale: '1' },
      {
        duration: 1000,
        easing: 'easeOutSine',
        queue: false });

    } });

});
</script>

</body>
</html>

Preview

RECENT CODES

Bootstrap Header Menu with Dynamic Height

Bootstrap Pricing Table with Color Change

Bootstrap Assigning Project List

Bootstrap Accordion Form Wizard

Bootstrap Grids with Various Hover Effect

Bootstrap Image Gallery with Zoom Effect

Bootstrap Users Profile with Tabs

Bootstrap Pricing Table with Zoom Effect

Bootstrap Shopping Cart Table

Bootstrap Dark/Light Switching Header Menu

Feel The Power

Bootstrap Grids: Bootstrap Image Gallery with Zoom Effect

What are You Looking for?

Watch how to Create the Tool!

The Tool Demo