Home How to use Sitemap About Us

Feel The Power


content logo
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
FIND US
LINK US
download Link to us:
Site Logo
Please put this code in your page.