Btukfyl

I am trying to place 6 divs around a circle and put images on each div. Also am trying add hover selector to text pop up.
I have these two things separately but I am not able to merge them into one thing.

This is divs around the circle: 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>

And this is the hover over image: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>

Can you help me merging these two into one please?