Introduction
iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!
Demo - Circle
Hover effect 1
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1"><a href="#">
<div class="spinner"></div>
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect1"><a href="#">
<div class="spinner"></div>
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
Hover effect 2
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect2 left_to_right"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect2 left_to_right"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect2 right_to_left"><a href="#">
<div class="img"><img src="images/assets/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect2 right_to_left"><a href="#">
<div class="img"><img src="images/assets/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect2 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect2 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect2 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect2 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 3
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect3 left_to_right"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect3 left_to_right"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect3 right_to_left"><a href="#">
<div class="img"><img src="images/assets/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect3 right_to_left"><a href="#">
<div class="img"><img src="images/assets/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Right to left-->
<!-- Bottom to top-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect3 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect3 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
<!-- Top to bottom-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect3 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect3 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Top to bottom-->
Hover effect 4
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect4 left_to_right"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect4 left_to_right"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect4 right_to_left"><a href="#">
<div class="img"><img src="images/assets/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect4 right_to_left"><a href="#">
<div class="img"><img src="images/assets/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect4 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect4 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect4 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect4 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 5
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect5"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect5"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
Hover effect 6
<!-- Scale up-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect6 scale_up"><a href="#">
<div class="img"><img src="images/assets/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect6 scale_up"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored-->
</div>
</div>
<!-- end Scale up-->
<!-- Scale down-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect6 scale_down"><a href="#">
<div class="img"><img src="images/assets/8.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect6 scale_down"><a href="#">
<div class="img"><img src="images/assets/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored-->
</div>
</div>
<!-- end Scale down-->
<!-- Scale down up-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect6 scale_down_up"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect6 scale_down_up"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored-->
</div>
</div>
<!-- end Scale down up-->
Hover effect 7
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect7 left_to_right"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect7 left_to_right"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect7 right_to_left"><a href="#">
<div class="img"><img src="images/assets/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect7 right_to_left"><a href="#">
<div class="img"><img src="images/assets/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect7 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect7 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect7 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect7 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 8
<!-- 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>
<!-- end Bottom to top-->
Hover effect 9
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect9 left_to_right"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect9 left_to_right"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect9 right_to_left"><a href="#">
<div class="img"><img src="images/assets/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect9 right_to_left"><a href="#">
<div class="img"><img src="images/assets/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect9 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect9 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect9 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect9 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 10
<div class="bs-example">
<!-- Top to bottom-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect10 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect10 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect10 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect10 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 11
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect11 left_to_right"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect11 left_to_right"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect11 right_to_left"><a href="#">
<div class="img"><img src="images/assets/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect11 right_to_left"><a href="#">
<div class="img"><img src="images/assets/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect11 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect11 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect11 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect11 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 12
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect12 left_to_right"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect12 left_to_right"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect12 right_to_left"><a href="#">
<div class="img"><img src="images/assets/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect12 right_to_left"><a href="#">
<div class="img"><img src="images/assets/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect12 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect12 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect12 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect12 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 13
<!-- From left and right -->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect13 from_left_and_right"><a href="#">
<div class="img"><img src="images/assets/7.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect13 from_left_and_right"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end From left and right -->
<!-- Top to bottom -->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect13 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect13 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect13 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect13 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top -->
Hover effect 14
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect14 left_to_right"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect14 left_to_right"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect14 right_to_left"><a href="#">
<div class="img"><img src="images/assets/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect14 right_to_left"><a href="#">
<div class="img"><img src="images/assets/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect14 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect14 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect14 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect14 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 15
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect15 left_to_right"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect15 left_to_right"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
Hover effect 16
<!-- Left to right -->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect16 left_to_right"><a href="#">
<div class="img"><img src="images/assets/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect16 left_to_right"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 effect16 right_to_left"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect16 right_to_left"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored-->
</div>
</div>
<!-- end Right to left -->
Hover effect 17
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect17"><a href="#">
<div class="img"><img src="images/assets/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect17"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
Hover effect 18
Note: This will not work in IE9, since IE9 doesn't support 3d rotate.
<!-- Bottom to top -->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect18 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect18 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end colored-->
</div>
</div>
<!-- end Bottom to top -->
<!-- Left to right -->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect18 left_to_right"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect18 left_to_right"><a href="#">
<div class="img"><img src="images/assets/7.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect18 right_to_left"><a href="#">
<div class="img"><img src="images/assets/6.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect18 right_to_left"><a href="#">
<div class="img"><img src="images/assets/8.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect18 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect18 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end colored-->
</div>
</div>
<!-- end Top to bottom -->
Hover effect 19
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect19"><a href="#">
<div class="img"><img src="images/assets/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect19"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
Hover effect 20
<!-- Top to bottom -->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect20 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/2.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect20 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/4.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect20 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/3.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 effect20 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/5.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top -->
Demo - Square
Hover effect 1
<!-- Left and right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect1 left_and_right"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect1 left_and_right"><a href="#">
<div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Left and right-->
<!-- Top to bottom-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect1 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect1 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect1 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect1 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 2
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect2"><a href="#">
<div class="img"><img src="images/assets/rect/10.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect2"><a href="#">
<div class="img"><img src="images/assets/rect/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
Hover effect 3
<!-- Bottom to top-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect3 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect3 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
<!-- Top to bottom-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect3 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect3 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Top to bottom-->
Hover effect 4
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect4"><a href="#">
<div class="img"><img src="images/assets/rect/9.jpg" alt="img"></div>
<div class="mask1"></div>
<div class="mask2"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect4"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="mask1"></div>
<div class="mask2"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
Hover effect 5
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect5 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/9.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect5 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/10.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect5 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect5 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Right to left-->
Hover effect 6
<!-- From top and bottom-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect6 from_top_and_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect6 from_top_and_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end From top and bottom-->
<!-- From left and right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect6 from_left_and_right"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect6 from_left_and_right"><a href="#">
<div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end From left and right-->
<!-- Top to bottom-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect6 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect6 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect6 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect6 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 7
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect7"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect7"><a href="#">
<div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
Hover effect 8
<!-- Scale up-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect8 scale_up"><a href="#">
<div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect8 scale_up"><a href="#">
<div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Scale up-->
<!-- Scale down-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect8 scale_down"><a href="#">
<div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect8 scale_down"><a href="#">
<div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Scale down-->
Hover effect 9
Note: This will not work in IE9, since IE9 doesn't support 3d rotate.
<!-- Bottom to top-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect9 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 square colored effect9 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect9 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/1.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 square colored effect9 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 square effect9 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 square colored effect9 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 square effect9 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<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 square colored effect9 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Top to Bottom-->
Hover effect 10
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect10 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect10 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect10 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect10 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect10 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect10 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect10 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect10 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 11
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect11 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect11 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect11 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect11 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect11 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect11 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect11 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect11 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 12
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect12 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect12 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect12 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect12 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect12 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect12 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect12 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect12 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 13
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect13 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect13 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect13 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect13 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect13 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect13 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect13 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect13 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 14
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect14 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect14 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect14 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect14 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect14 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect14 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect14 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect14 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
Hover effect 15
<!-- Left to right-->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item square effect15 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/1.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect15 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect15 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect15 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect15 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect15 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</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 square effect15 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item square colored effect15 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->