Hover Icons in Justified Gallery

Question

I am creating images grid and I am using the following library Justified Gallery. The hover effect is working fine for the img-alt attribute. but I want to display some icons with links on the hover. Just like the following picture

Take a look the the following Fiddle

https://jsfiddle.net/zvj2o7fy/1/embedded/result/

<div id="justifiedGallery">
  <a href="#" title="What's your destination?">
    <img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Just in a dream Place">
    <img alt="Just in a dream Place" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Il Capo at Palermo">
    <img alt="Il Capo at Palermo" src="http://lorempixel.com/300/226/?1" />
  </a>
  <a href="#" title="Erice">
    <img alt="Erice" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/127/300/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/440/227/?1" />

  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />

  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
  </a>

  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
  </a>

  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
  </a>

  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/227/340/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Truthful Innocence">
    <img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
  </a>
</div>

Please help me to create this.

Answer 1

as per documentation(http://miromannino.github.io/Justified-Gallery/captions/) remove title attribute and add a div with class caption just like

<a href="#">
    <img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
    <div class="caption">
        <div class="icon-cart">
        <img src="https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png"/>
        </div>
    </div>
  </a>

in this div you can add any thing.

If you need links on caption, need a small structure change like

<div id="justifiedGallery">
    <div>
        <a href="http://lorempixel.com/340/227/?1">
            <img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
        </a>
        <div class="caption">
            <a href="#">
                <i class="fa fa-shopping-cart"></i>
            </a>
            <a href="#">
                <i class="fa fa-cloud-download"></i>
            </a>
        </div>
    </div>
    <div>
        <a href="http://lorempixel.com/340/227/?1">
            <img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
        </a>
        <div class="caption">
            <a href="#">
                <i class="fa fa-shopping-cart"></i>
            </a>
            <a href="#">
                <i class="fa fa-cloud-download"></i>
            </a>
        </div>
    </div>
</div>

Answer 2

Justified Gallery recommends using the Colorbox jQuery library inside of a callback to achieve what you are trying to do. Colorbox controls a caption lightbox div that gets shown on hover.

If you look at the Colorbox 'multiple galleries with one call' demo, you'll see you can add custom icons for each image by adding a hidden div called caption inside of the gallery container:

  <div class="container">
    <a href="image.jpg" class="jg-entry cboxElement">
      <img alt="Alt Message" src="image.jpg">
      <div class="caption">
       <div class="icon1"></div>
       <div class="icon2"></div>
       <div class="icon3"></div>
      </div>
    </a>
  </div>

To invoke the captions and make them appear via JS, you'll make your call to Colobox inside of justified gallery's callback via the .jg-complete class. Inside of the callback, the colorbox library is invoked with the necessary parameters (like opacity and transition shown in the code sample below) to get your icons fading into view exactly you would like.

JS:

$('.container').justifiedGallery({
    rowHeight : 50 
}).on('jg.complete', function () {
    $(this).find('a').colorbox({
        maxWidth : '80%',
        maxHeight : '80%',
        opacity : 0.8,
        transition : 'elastic',
        current : ''
    });
});