CSS Image Gallery with Zoom & Detailed Shown While Hover

This code snippet helps you to create an image gallery with a zoom hover effect. It uses Bootstrap CSS to arrange images in a responsive grid layout. The image smoothly scales up on the hover event and shows the image caption.

How to Create CSS Image Gallery with Zoom & Detailed Shown While Hover

First of all, load the Reset and Bootstrap CSS by adding the following CDN links into the head tag of your HTML document.

<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'>

Create the HTML structure for the image gallery as follows:

<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>

Style the image gallery using the following CSS styles:

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

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

.content-art {
  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;
  transform: translateY(100%) translateZ(0);
  transition: 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;
}

Load the jQuery, Velocity JS and Handlebars JS by adding the following CSN before closing the body tag:

<script src='//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>

Finally, initialize the image gallery in the jQuery document ready function with the following configurations.

$(document).ready(function() {
  
  var data = { gallery: [
    {title: "Ella me quiso, a veces yo también la quería", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/murra.jpg", alt: "lorem" },
    {title: "Puedo escribir los versos más tristes esta noche", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g1.jpg", alt: "lorem" },
    {title: "Mi voz buscaba el viento para tocar su oído", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g2.jpg", alt: "lorem" },
    {title: "Mi alma no se contenta con haberla perdido", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g3.jpg", alt: "lorem" },
    {title: "El viento de la noche gira en el cielo y canta", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g4.jpg", alt: "lorem" },
    {title: "La noche está estrellada, y tiritan, azules, los astros, a lo lejos", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g5.jpg", alt: "lorem" },
    {title: "Cómo no haber amado sus grandes ojos fijos", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g6.jpg", alt: "lorem" },
    {title: "De otro. Será de otro. Como antes de mis besos.", img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/g7.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
      });
    }
  });
});

That’s all! hopefully, you have successfully created CSS Image Gallery with Zoom & Detailed Shown While Hover. If you have any questions or suggestions, feel free to comment below.