文字悬停在圆周围的图像划分

Question

我试图将6个div围绕一个圆放置，并在每个div上放置图像。也正在尝试将悬停选择器添加到文本弹出窗口。 我分别拥有这两件事，但是我无法将它们合并为一件事。

这是一个围绕圆的div：https://jsfiddle.net/zwsck7gm/2/

HTML：

<div class="container-fluid">
  <div class="circle_container col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
     <img class="transparent_square" src="http://i.stack.imgur.com/5Y4F4.jpg" width="2" height="2" />
     <div class="central_text text-center">
        <h3 id="item_title">Test</h3>
        <h5 id="item_description"></h5>
     </div>
     <div class="moon_container moon1"><a href=""><img class="moon moon1" alt="item1" src="https://images.pexels.com/photos/754587/pexels-photo-754587.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></a></div>

    <div class="moon_container moon2"><a href=""><img class="moon moon2" alt="item2" src="https://images.pexels.com/photos/754587/pexels-photo-754587.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></a></div>

   <div class="moon_container moon3"><a href=""><img class="moon moon3" alt="item3" src="https://images.pexels.com/photos/754587/pexels-photo-754587.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></a></div>

     <div class="moon_container moon4"><a href=""><img class="moon moon4" alt="item4" src="https://images.pexels.com/photos/754587/pexels-photo-754587.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></a></div>

     <div class="moon_container moon5"><a href=""><img class="moon moon5" alt="item5" src="https://images.pexels.com/photos/754587/pexels-photo-754587.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></a></div>

     <div class="moon_container moon6"><a href=""><img class="moon moon6" alt="item6" src="https://images.pexels.com/photos/754587/pexels-photo-754587.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></a></div>
  </div>

这是将鼠标悬停在图片上：http://jsfiddle.net/ytwL7g81/

HTML：

<div class="">
     <div class="col-sm-4 img">
        <a href="industries-info.php" target="blank">
           <div class="hvrbox">
              <img src="https://images.pexels.com/photos/1085695/pexels-photo-1085695.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Text" class="hvrbox-layer_bottom responsive" width="400px">
              <div class="hvrbox-layer_top">
                 <div class="hvrbox-text">
                    Hover
                    <div class="hvrbox-text_mobile">Tap again to go further</div>
                 </div>
              </div>
           </div>
        </a>
     </div>

您能帮我将这两部分合并吗？