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 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://frontendfreecode.com">Free Frontend</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 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">Free Frontend</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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars

Feel The Power

Bootstrap Grids:

Bootstrap Image Gallery with Zoom Effect

Bootstrap Image Gallery Dynamic

Bootstrap Zoomable Image Gallery

HTML CSS Image Gallery Effect