<!-- Left to right-->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item circle effect8 left_to_right"><a href="#">
        <div class="img-container">
          <div class="img"><img src="images/assets/4.jpg" alt="img"></div>
        </div>
        <div class="info-container">
          <div class="info">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item circle colored effect8 left_to_right"><a href="#">
        <div class="img-container">
          <div class="img"><img src="images/assets/5.jpg" alt="img"></div>
        </div>
        <div class="info-container">
          <div class="info">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>
<!-- end Left to right-->
 
 
<!-- Right to left-->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item circle effect8 right_to_left"><a href="#">
        <div class="img-container">
          <div class="img"><img src="images/assets/6.jpg" alt="img"></div>
        </div>
        <div class="info-container">
          <div class="info">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item circle colored effect8 right_to_left"><a href="#">
        <div class="img-container">
          <div class="img"><img src="images/assets/7.jpg" alt="img"></div>
        </div>
        <div class="info-container">
          <div class="info">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>
<!-- end Right to left-->
 
 
<!-- Top to bottom-->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item circle effect8 top_to_bottom"><a href="#">
        <div class="img-container">
          <div class="img"><img src="images/assets/1.jpg" alt="img"></div>
        </div>
        <div class="info-container">
          <div class="info">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item circle colored effect8 top_to_bottom"><a href="#">
        <div class="img-container">
          <div class="img"><img src="images/assets/2.jpg" alt="img"></div>
        </div>
        <div class="info-container">
          <div class="info">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>
<!-- end Top to bottom-->
 
 
<!-- Bottom to top-->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item circle effect8 bottom_to_top"><a href="#">
        <div class="img-container">
          <div class="img"><img src="images/assets/3.jpg" alt="img"></div>
        </div>
        <div class="info-container">
          <div class="info">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item circle colored effect8 bottom_to_top"><a href="#">
        <div class="img-container">
          <div class="img"><img src="images/assets/4.jpg" alt="img"></div>
        </div>
        <div class="info-container">
          <div class="info">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>