Bootstrap Grids:

Bootstrap Image Gallery with Zoom Effect

Image galleries are a great way to showcase your work if you are a photographer or have a similar job that needs clients to see your work. They are an extremely popular feature and have been used in many modern websites. As much as simplicity is good and attracts people, too much of it might make your website look pale which then leads to the visitors thinking your site is not all that professional. In other words, you are going to want an image gallery that is both interesting for the visitors and is not too busy. So, don’t overdo it when you are designing your website and you will be good.

Following is a Bootstrap image gallery dynamic template code that can help you add in a unique and special image gallery layout to your website. The code features a dynamic hover effect preview system, meaning the picture zooms in and starts moving whenever you hover your mouse cursor on a picture. A custom text can also pop up when you hover your mouse over the images. The whole HTML CSS image gallery effect layout has a smooth feeling to it. our Bootstrap zoomable image gallery can display your work in the best way possible.

#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 Free 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;" href="http://www.devanswer.com">Frontend Free 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