javascript - Justified Gallery 中的悬停图标

Question

我正在创建图像网格并使用以下库 Justified Gallery .悬停效果适用于 img-alt 属性。但我想在悬停时显示一些带有链接的图标。 就像下图一样

看看下面的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>

请帮我创建这个。

Answer 1

根据文档(http://miromannino.github.io/Justified-Gallery/captions/) 删除 title 属性并添加带有类标题的 div 就像

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

在这个 div 中你可以添加任何东西。

如果你需要标题上的链接，需要一个小的结构改变，比如

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