У вас возникли проблемы с проектом iHover git

Question

Я пытаюсь использовать эффект проекта iHover git, но может только частично его обработать. Вот ссылка на демо GitHub и файлы

http://gudh.github.io/ihover/dist/index.html (демо) https://github.com/gudh/ihover

Я настроить временную поддельную страницу, чтобы попытаться имитировать демо. Я загрузил файлы и загрузил все CSS и связал их. В нем говорится, что все, что вам нужно, это CSS и ваше благо. Но я не понимаю этого, потому что я связал его, и он не работает. Пожалуйста помоги.

Вот мой тестовый сайт: http://circleton.mybnbwebsite.com/

<div class="row"> 
    <div class="col-sm-6"> 
     <!-- normal --> 

     <div class="ih-item circle effect2 left_to_right"> 
      <div class="img"><img alt="img" src= 
      "http://gudh.github.io/ihover/dist/images/assets/4.jpg"></div> 

      <div class="info"> 
       <h3>Heading here</h3> 

       <p>Description goes here</p> 
      </div> 
     </div><!-- end normal --> 
    </div> 

    <div class="col-sm-6"> 
     <!-- colored --> 

     <div class="ih-item circle colored effect2 left_to_right"> 
      <div class="img"><img alt="img" src= 
      "http://gudh.github.io/ihover/dist/images/assets/5.jpg"></div> 

      <div class="info"> 
       <h3>Heading here</h3> 

       <p>Description goes here</p> 
      </div> 
     </div><!-- end colored --> 
    </div> 
</div> 

Answer 1

Вы пропускаете якорь:

<div class="ih-item circle colored effect2 left_to_right"> 
     <a href="#"> <!-- your code does not have this or the matching end tag --> 
      <div class="img"> 
       <img src="http://gudh.github.io/ihover/dist/images/assets/5.jpg" 
alt="img" /> 
     </div> 

     <div class="info"> 
      <h3>Heading here</h3> 

      <p>Description goes here</p> 
     </div> 
     </a> 
    </div> 

Большая часть их кода зависит от :hover псевдо элемента, чтобы сделать преобразования (поворот, перевод , и т.д). Таким образом, без привязки он будет работать неправильно.

.ih-item.circle.effect2.left_to_right a:hover .img { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
}