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