Изображение делится вокруг круга с текстовым наведением - PullRequest
Новая
       36

Изображение делится вокруг круга с текстовым наведением

0 голосов
/ 27 ноября 2018

Я пытаюсь разместить 6 делений по кругу и нанести изображения на каждое деление.Также я пытаюсь добавить зависания к всплывающему текстуУ меня есть эти две вещи по отдельности, но я не могу объединить их в одну вещь.

Это деления по кругу: 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>

Можете ли вы помочь мне объединить эти два в одно, пожалуйста?

...