| Server IP : 82.208.35.60 / Your IP : 216.73.217.33 Web Server : Apache/2.4.55 (FreeBSD) OpenSSL/1.1.1q-freebsd PHP/7.3.31 System : FreeBSD server7.d2m.cz 12.4-RELEASE-p9 FreeBSD 12.4-RELEASE-p9 GENERIC amd64 User : studiokobylisy_cz ( 1008) PHP Version : 7.3.31 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /usr/home/d2m/zzz/michaela_cz/wp-content/plugins/image-hover-effects/documentation/ |
Upload File : |
<!DOCTYPE html>
<html class="no-js iarouse">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Image Hover Effects</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- stylesheets-->
<link href="http://fonts.googleapis.com/css?family=Lustria|Lato:300,400,700,400italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="styles/main.css"/>
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<header role="banner" class="top-header navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<div class="container">
</div>
</header>
<div id="content" class="header bs-header">
<div class="container">
<h1>Image Hover Effects</h1>
<p>Fastes Ever Image Hover Effect WordPress Plugin</p>
</div>
</div>
<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 - Circle</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 - Square</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>
<li><a href="#square16">Hover effect 16</a></li>
<li><a href="#square17">Hover effect 17</a></li>
<li><a href="#square18">Hover effect 18</a></li>
<li><a href="#square19">Hover effect 19</a></li>
<li><a href="#square20">Hover effect 20</a></li>
</ul>
</li>
<li><a href="#feat">Features</a></li>
<li><a href="#usage">How to use it?</a></li>
</ul>
</div>
</div>
<div role="main" class="col-md-9">
<section id="intro">
<div class="page-header">
<h1>Introduction</h1>
</div>
<p class="lead">Image Hover Effects is an impressive hover effects collection.It is Fastest and Simplest plugin which apply over 40 hover effect to images on front end. A bunch of options can be made by admin to customize these hover effects. It won’t use any JS API. Pure CSS3 is used to render apply effect fastly.</p>
</section>
<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">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
No Specific Direction.You can Use any
</p>
</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>Effect 2</h3>
<p><b>Left To Right</b></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>Effect 2</h3>
<p><b>Left To Right</b></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>Effect 2</h3>
<p><b>Right To Left</b></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>Effect2</h3>
<p><b>Right To Left</b></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>Effect2</h3>
<p><b>Top To Bottom</b></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>Effect2</h3>
<p><b>Top To Bottom</b></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>Effect2</h3>
<p><b>Bottom To Top</b></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>Effect2</h3>
<p><b>Bottom To Top</b></p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</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>Effect 3</h3>
<p><b>Left To Right</b></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>Effect 3</h3>
<p><b>Left To Right</b></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>Effect 3 </h3>
<p><b>Right to Left</b></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>Effect 3</h3>
<p><b>Right To Left</b></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>Effect 3</h3>
<p><b>Bottom To Top</b></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>Effect 3</h3>
<p><b>Bottom To Top</b></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>Effect 3</h3>
<p><b>Top To Bottom</b></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>Effect 3</h3>
<p><b>Top To Bottom</b></p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Top to bottom-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</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>Effect 4</h3>
<p><b>Left To Right</b></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>Effect 4</h3>
<p><b>Left To Right</b></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>Effect 4</h3>
<p><b>Right To Left</b></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>Effect 4</h3>
<p><b>Right To Left</b></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>Effect 4</h3>
<p><b>Top To Bottom</b></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>Effect 4</h3>
<p><b>Top To Bottom</b></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>Effect 4</h3>
<p><b>Bottom To Top</b></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>Effect 4</h3>
<p><b>Bottom To Top</b></p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</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">
<p class="prettyprint">
<h4>Directions Supported</h4>
No Direction Reqired
</p>
</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">
<p class="prettyprint">
<h4>Directions Supported</h4>
No Specific Direction.You can Use any
</p>
</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>Effect 7</h3>
<p>Left To Right</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>Effect 7</h3>
<p>Left To Right</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>Effect 7</h3>
<p>Right To Left</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>Effect 7</h3>
<p>Right To Left</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>Effect 7</h3>
<p>Top To Bottom</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>Effect 7</h3>
<p>Top To Bottom</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>Effect 7</h3>
<p>Bottom To Top</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>Effect 7</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</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>Effect 8</h3>
<p>Left To Right</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>Effect 8</h3>
<p>Left To Right</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>Effect 8</h3>
<p>Right To Left</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>Effect 8</h3>
<p>Right To Left</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>Effect 8</h3>
<p>Top To Bottom</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>Effect 8</h3>
<p>Top To Bottom</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>Effect 8</h3>
<p>Bottom To Top</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>Effect 8</h3>
<p>Bottom To Top</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</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>Effect 9</h3>
<p>Left To Right</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>Effect 9</h3>
<p>Left To Right</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>Effect 9</h3>
<p>Right To Left</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>Effect 9</h3>
<p>Right To Left</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>Effect 9</h3>
<p>Top To Bottom</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>Effect 9</h3>
<p>Top To Bottom</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>Effect 9</h3>
<p>Bottom To Top</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>Effect 9</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</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>Effect 10</h3>
<p>Top To Bottom</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>Effect 10</h3>
<p>Top To Bottom</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>Effect 10</h3>
<p>Bottom To Top</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>Effect 10</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</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>Effect 11</h3>
<p>Left To Right</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>Effect 11</h3>
<p>Left To Right</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>Effect 11</h3>
<p>Right To Left</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>Effect 11</h3>
<p>Right To Left</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>Effect 11</h3>
<p>Top To Bottom</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>Effect 11</h3>
<p>Top To Bottom</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>Effect 11</h3>
<p>Bottom To Top</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>Effect 11</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</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>Effect 12</h3>
<p>Left To Right</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>Effect 12</h3>
<p>Left To Right</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>Effect 12</h3>
<p>Right To Left</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>Effect 12</h3>
<p>Right To Left</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>Effect 12</h3>
<p>Top To Bottom</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>Effect 12</h3>
<p>Top To Bottom</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>Effect 12</h3>
<p>Bottom To Top</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>Effect 12</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div><br>
<h3 id="circle13" class="section-heading">Hover effect 13</h3>
<div class="bs-example">
<!-- 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>Effect 13</h3>
<p>Top To Bottom</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>Effect 13</h3>
<p>Top To Bottom</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>Effect 13</h3>
<p>Bottom To Top</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>Effect 13</h3>
<p>Bottom To Top</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top -->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</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>Effect 14</h3>
<p>Left To Right</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>Effect 14</h3>
<p>Left To Right</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>Effect 14</h3>
<p>Right To Left</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>Effect 14</h3>
<p>Right To Left</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>Effect 14</h3>
<p>Top To Bottom</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>Effect 14</h3>
<p>Top To Bottom</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>Effect 14</h3>
<p>Bottom To Top</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>Effect 14</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div><br>
<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>Effect 15</h3>
<p>Left To Right</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>Effect 15</h3>
<p>Left To Right</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
</ul>
</p>
</div><br>
<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>Effect 16</h3>
<p>Left To Right</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>Effect 16</h3>
<p>Left To Right</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>Effect 16</h3>
<p>Right To Left</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>Effect 16</h3>
<p>Right To Left</p>
</div></a></div>
<!-- end colored-->
</div>
</div>
<!-- end Right to left -->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
</ul>
</p>
</div><br>
<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>Effect 17</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>Effect 17</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
Direction Not Required
</p>
</div><br>
<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>Effect 18</h3>
<p>Bottom To Top</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>Effect 18</h3>
<p>Bottom To Top</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>Effect 18</h3>
<p>Left To Right</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>Effect 18</h3>
<p>Left To Right</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>Effect 18</h3>
<p>Right To Left</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>Effect 18</h3>
<p>Right To Left</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>Effect 18</h3>
<p>Top To Bottom</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>Effect 18</h3>
<p>Top To Bottom</p>
</div>
</div></a></div>
<!-- end colored-->
</div>
</div>
<!-- end Top to bottom -->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div><br>
<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>Effect 19</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>Effect 19</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
No Specific Direction.You can Use any
</p>
</div><br>
<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>Effect 20</h3>
<p>Top To Bottom</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>Effect 20</h3>
<p>Top To Bottom</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>Effect 20</h3>
<p>Bottom To Top</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>Effect 20</h3>
<p>Bottom To Top</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top -->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</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">
<!-- 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>Effect 1</h3>
<p>Top To Bottom</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>Effect 1</h3>
<p>Top To Bottom</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>Effect 1</h3>
<p>Bottom To Top</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>Effect 1</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div><br>
<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>Effect 2</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>Effect 2</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
No Specific Direction.You can Use any
</p>
</div><br>
<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>Effect 3</h3>
<p>Bottom To Top</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>Effect 3</h3>
<p>Bottom To Top</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>Effect 3</h3>
<p>Top To Bottom</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>Effect 3</h3>
<p>Top To Bottom</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Top to bottom-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div><br>
<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>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
No Specific Direction.You can Use any
</p>
</div><br>
<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>Effect 5</h3>
<p>Left To Right</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>Effect 5</h3>
<p>Left To Right</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>Effect 5</h3>
<p>Right To Left</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>Effect 5</h3>
<p>Right To Left</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Right to left-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
</ul>
</p>
</div><br>
<h3 id="square6" class="section-heading">Hover effect 6</h3>
<div class="bs-example">
<!-- 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>Effect 6</h3>
<p>Top To Bottom</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>Effect 6</h3>
<p>Top To Bottom</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>Effect 6</h3>
<p>Bottom To Top</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>Effect 6</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div><br>
<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>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
No Specific Direction.You can Use any
</p>
</div><br>
<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>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
No Specific Direction.You can Use any
</p>
</div><br>
<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>Effect 9</h3>
<p>Bottom To Top</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>Effect 9</h3>
<p>Bottom To Top</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>Effect 9</h3>
<p>Left To Right</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>Effect 9</h3>
<p>Left To Right</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>Effect 9</h3>
<p>Right To Left</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>Effect 9</h3>
<p>Right To Left</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>Effect 9</h3>
<p>Top To Bottom</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>Effect 9</h3>
<p>Top To Bottom</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Top to Bottom-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div><br>
<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>Effect 10</h3>
<p>Left To Right</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>Effect 10</h3>
<p>Left To Right</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>Effect 10</h3>
<p>Right To Left</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>Effect 10</h3>
<p>Right To Left</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>Effect 10</h3>
<p>Top To Bottom</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>Effect 10</h3>
<p>Top To Bottom</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>Effect 10</h3>
<p>Bottom To Top</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>Effect 10</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div><br>
<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>Effect 11</h3>
<p>Left To Right</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>Effect 11</h3>
<p>Left To Right</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>Effect 11</h3>
<p>Right To Left</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>Effect 11</h3>
<p>Right To Left</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>Effect 11</h3>
<p>Top To Bottom</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>Effect 11</h3>
<p>Top To Bottom</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>Effect 11</h3>
<p>Bottom To Top</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>Effect 11</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div><br>
<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>Effect 12</h3>
<p>Left To Right</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>Effect 12</h3>
<p>Left To Right</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>Effect 12</h3>
<p>Right To Left</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>Effect 12</h3>
<p>Right To Left</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>Effect 12</h3>
<p>Top To Bottom</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>Effect 12</h3>
<p>Top To Bottom</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>Effect 12</h3>
<p>Bottom To Top</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>Effect 12</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</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>Effect 13</h3>
<p>Left To Right</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>Effect 13</h3>
<p>Left To Right</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>Effect 13</h3>
<p>Right To Left</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>Effect 13</h3>
<p>Right To Left</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>Effect 13</h3>
<p>Top To Bottom</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>Effect 13</h3>
<p>Top To Bottom</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>Effect 13</h3>
<p>Bottom To Top</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>Effect 13</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div><br>
<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>Effect 14</h3>
<p>Lef To Right</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>Effect 14</h3>
<p>Lef To Right</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>Effect 14</h3>
<p>Right To Left</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>Effect 14</h3>
<p>Right To Left</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>Effect 14</h3>
<p>Top To Bottom</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>Effect 14</h3>
<p>Top To Bottom</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>Effect 14</h3>
<p>Bottom To Top</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>Effect 14</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</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>Effect 15</h3>
<p>Left To Right</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>Effect 15</h3>
<p>Left To Right</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>Effect 15</h3>
<p>Right To Left</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>Effect 15</h3>
<p>Right To Left</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>Effect 15</h3>
<p>Top To Bottom</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>Effect 15</h3>
<p>Top To Bottom</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>Effect 15</h3>
<p>Bottom To Top</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>Effect 15</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div>
<h3 id="square16" 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 square effect12 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
<div class="info">
<h3>Effect 12</h3>
<p>Left To Right</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>Effect 12</h3>
<p>Left To Right</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>Effect 12</h3>
<p>Right To Left</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>Effect 12</h3>
<p>Right To Left</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>Effect 12</h3>
<p>Top To Bottom</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>Effect 12</h3>
<p>Top To Bottom</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>Effect 12</h3>
<p>Bottom To Top</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>Effect 12</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div><br>
<h3 id="square17" class="section-heading">Hover effect 17</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>Effect 10</h3>
<p>Left To Right</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>Effect 10</h3>
<p>Left To Right</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>Effect 10</h3>
<p>Right To Left</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>Effect 10</h3>
<p>Right To Left</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>Effect 10</h3>
<p>Top To Bottom</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>Effect 10</h3>
<p>Top To Bottom</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>Effect 10</h3>
<p>Bottom To Top</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>Effect 10</h3>
<p>Bottom To Top</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Bottom to top-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
<li>Top To Bottom</li>
<li>Bottom To Top</li>
</ul>
</p>
</div><br>
<h3 id="square18" class="section-heading">Hover effect 18</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>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
No Specific Direction.You can Use any
</p>
</div><br>
<h3 id="square19" class="section-heading">Hover effect 19</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>Effect 2</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>Effect 2</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
No Specific Direction.You can Use any
</p>
</div><br>
<h3 id="square20" class="section-heading">Hover effect 20</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>Effect 5</h3>
<p>Left To Right</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>Effect 5</h3>
<p>Left To Right</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>Effect 5</h3>
<p>Right To Left</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>Effect 5</h3>
<p>Right To Left</p>
</div></a></div>
<!-- end colored -->
</div>
</div>
<!-- end Right to left-->
</div>
<div class="highlight">
<p class="prettyprint">
<h4>Directions Supported</h4>
<ul>
<li>Left To Right</li>
<li>Right To Left</li>
</ul>
</p>
</div><br>
</section>
<section id="feat">
<div class="page-header">
<h1>Features</h1>
</div>
<ul>
<li>40+ Hover Effects</li>
<li>Pure CSS3 Animations</li>
<li>Multiple and Unlimited Shortcodes</li>
<li>Multiple and Unlimited Categories</li>
<li>Custom Width for Images</li>
<li>Custom Height for Images</li>
<li>Option for external link</li>
<li>100% Responsive</li>
<li>AJAX Based</li>
<li>Easy and Fastest to Setup</li>
<li>Custom Settings for every Single Image</li>
<li>Custom Sizes for Caption Heading and Details</li>
<li>Custom Background Color for Caption</li>
<li>Grid Option</li>
<li>Shortcode Generator</li>
</ul>
</section>
<section id="usage">
<div class="page-header">
<h1>How to use it?</h1>
<h2>Installation</h2>
<ul>
<li>Install plugin from zip file and activate it</li>
<li>Once plugin is activated you can access options at Dashboard > Image Hover Effects-Pro</li>
<li>Fill all the settings Options for the First Image</li>
<li>Save Setting After filling all the options for the first Image and refresh the page(<b>Recommended</b>)</li>
<li>Add Images in the category and Get Shortcode using “Get Shortcode” button</li>
<li>Use Shortcode and see plugin in action</li>
</ul>
</div>
<img class="img-responsive" src="images/demo.png" alt="">
</section>
</div>
</div>
</div>
<!-- Scripts-->
<script src="scripts/app.js"></script>
</body>
</html>