分享15款css3鼠标悬停图片动画过渡特效。这是一款15款不同效果的css3 hover动画过渡效果代码。效果图如下：
实现的代码。
html代码：
<div class="htmleaf-container"> <div class="container bs-docs-container"> <div class="row"> <div class="col-md-3"> <div class="bs-sidebar hidden-print"> <ul class="nav bs-sidenav"> <li><a href="#intro">Introduction</a></li> <li> <a href="#circle">Demo - 圆形图片</a> <ul class="nav"> <li><a href="#circle1">Hover effect 1</a></li> <li><a href="#circle2">Hover effect 2</a></li> <li><a href="#circle3">Hover effect 3</a></li> <li><a href="#circle4">Hover effect 4</a></li> <li><a href="#circle5">Hover effect 5</a></li> <li><a href="#circle6">Hover effect 6</a></li> <li><a href="#circle7">Hover effect 7</a></li> <li><a href="#circle8">Hover effect 8</a></li> <li><a href="#circle9">Hover effect 9</a></li> <li><a href="#circle10">Hover effect 10</a></li> <li><a href="#circle11">Hover effect 11</a></li> <li><a href="#circle12">Hover effect 12</a></li> <li><a href="#circle13">Hover effect 13</a></li> <li><a href="#circle14">Hover effect 14</a></li> <li><a href="#circle15">Hover effect 15</a></li> <li><a href="#circle16">Hover effect 16</a></li> <li><a href="#circle17">Hover effect 17</a></li> <li><a href="#circle18">Hover effect 18</a></li> <li><a href="#circle19">Hover effect 19</a></li> <li><a href="#circle20">Hover effect 20</a></li> </ul> </li> <li> <a href="#square">Demo - 矩形图片</a> <ul class="nav"> <li><a href="#square1">Hover effect 1</a></li> <li><a href="#square2">Hover effect 2</a></li> <li><a href="#square3">Hover effect 3</a></li> <li><a href="#square4">Hover effect 4</a></li> <li><a href="#square5">Hover effect 5</a></li> <li><a href="#square6">Hover effect 6</a></li> <li><a href="#square7">Hover effect 7</a></li> <li><a href="#square8">Hover effect 8</a></li> <li><a href="#square9">Hover effect 9</a></li> <li><a href="#square10">Hover effect 10</a></li> <li><a href="#square11">Hover effect 11</a></li> <li><a href="#square12">Hover effect 12</a></li> <li><a href="#square13">Hover effect 13</a></li> <li><a href="#square14">Hover effect 14</a></li> <li><a href="#square15">Hover effect 15</a></li> </ul> </li> </ul> </div> </div> <div role="main" class="col-md-9"> <section id="circle"> <div class="page-header"> <h1>Demo - Circle </h1> </div> <br> <h3 id="circle1" class="section-heading first-child">Hover effect 1</h3> <div class="bs-example"> <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"> </div> </div> </a> </div> <!-- end colored --> </div> </div> </div> <br> <h3 id="circle2" class="section-heading first-child">Hover effect 2</h3> <div class="bs-example"> <!-- 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--> </div> <div class="highlight"> </div> <br> <h3 id="circle3" class="section-heading">Hover effect 3</h3> <div class="bs-example"> <!-- 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--> </div> <div class="highlight"> </div> <br> <h3 id="circle4" class="section-heading">Hover effect 4</h3> <div class="bs-example"> <!-- 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--> </div> <div class="highlight"> </div> <br> <h3 id="circle5" class="section-heading">Hover effect 5</h3> <div class="bs-example"> <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> </div> <div class="highlight"> </div> <br> <h3 id="circle6" class="section-heading">Hover effect 6</h3> <div class="bs-example"> <!-- 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--> </div> <div class="highlight"> </div> <br> <h3 id="circle7" class="section-heading">Hover effect 7</h3> <div class="bs-example"> <!-- 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--> </div> <div class="highlight"> </div> <br> <h3 id="circle8" class="section-heading">Hover effect 8</h3> <div class="bs-example"> <!-- 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--> </div> <div class="highlight"> </div> <br> <h3 id="circle9" class="section-heading">Hover effect 9</h3> <div class="bs-example"> <!-- 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--> </div> <div class="highlight"> </div> <br> <h3 id="circle10" class="section-heading">Hover effect 10</h3> <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--> </div> <div class="highlight"> </div> <br> <h3 id="circle11" class="section-heading">Hover effect 11</h3> <div class="bs-example"> <!-- 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--> </div> <div class="highlight"> </div> <br> <h3 id="circle12" class="section-heading">Hover effect 12</h3> <div class="bs-example"> <!-- 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--> </div> <div class="highlight"> </div> <br> <h3 id="circle13" class="section-heading">Hover effect 13</h3> <div class="bs-example"> <!-- 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 --> </div> <div class="highlight"> </div> <br> <h3 id="circle14" class="section-heading">Hover effect 14</h3> <div class="bs-example"> <!-- 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--> </div> <h3 id="circle15" class="section-heading">Hover effect 15</h3> <div class="bs-example"> <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> </div> <h3 id="circle16" class="section-heading">Hover effect 16</h3> <div class="bs-example"> <!-- 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 --> </div> <h3 id="circle17" class="section-heading">Hover effect 17</h3> <div class="bs-example"> <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> </div> <h3 id="circle18" class="section-heading">Hover effect 18</h3> <div class="bs-callout bs-callout-warning"> <p>Note: This will not work in IE9, since IE9 doesn't support 3d rotate.</p> </div> <div class="bs-example"> <!-- 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 --> </div> <h3 id="circle19" class="section-heading">Hover effect 19</h3> <div class="bs-example"> <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> </div> <h3 id="circle20" class="section-heading">Hover effect 20</h3> <div class="bs-example"> <!-- 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 --> </div> </section> <section id="square"> <div class="page-header"> <h1>Demo - Square </h1> </div> <br> <h3 id="square1" class="section-heading">Hover effect 1</h3> <div class="bs-example"> <!-- 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--> </div> <h3 id="square2" class="section-heading">Hover effect 2</h3> <div class="bs-example"> <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> </div> <h3 id="square3" class="section-heading">Hover effect 3</h3> <div class="bs-example"> <!-- 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--> </div> <h3 id="square4" class="section-heading">Hover effect 4</h3> <div class="bs-example"> <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> </div> <h3 id="square5" class="section-heading">Hover effect 5</h3> <div class="bs-example"> <!-- 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--> </div> <h3 id="square6" class="section-heading">Hover effect 6</h3> <div class="bs-example"> <!-- 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--> </div> <h3 id="square7" class="section-heading">Hover effect 7</h3> <div class="bs-example"> <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> </div> <h3 id="square8" class="section-heading">Hover effect 8</h3> <div class="bs-example"> <!-- 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--> </div> <h3 id="square9" class="section-heading">Hover effect 9</h3> <div class="bs-callout bs-callout-warning"> <p>Note: This will not work in IE9, since IE9 doesn't support 3d rotate.</p> </div> <div class="bs-example"> <!-- 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--> </div> <h3 id="square10" class="section-heading">Hover effect 10</h3> <div class="bs-example"> <!-- 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--> </div> <h3 id="square11" class="section-heading">Hover effect 11</h3> <div class="bs-example"> <!-- 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--> </div> <h3 id="square12" class="section-heading">Hover effect 12</h3> <div class="bs-example"> <!-- 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--> </div> <div class="highlight"> </div> <br> <h3 id="square13" class="section-heading">Hover effect 13</h3> <div class="bs-example"> <!-- 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--> </div> <h3 id="square14" class="section-heading">Hover effect 14</h3> <div class="bs-example"> <!-- 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--> </div> <div class="highlight"> </div> <br> <h3 id="square15" class="section-heading">Hover effect 15</h3> <div class="bs-example"> <!-- 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--> </div> <div class="highlight"> </div> </section> </div> </div> </div> </div>