css3极好看的桃子动漫,css3美的黄肉桃动漫

css3很美的蟠桃动画,css3美的蟠桃动画

查看效果:

源码下载:

效果图如下:
图片 1

代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="Copyright" content="Tencent" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS3很美的蟠桃动画- 何问起</title><base target="_blank" />
<link rel="stylesheet" type="text/css" media="screen" href="http://hovertree.com/texiao/css3/26/css/style.css">
</head>
<body>

<div class="act_wrapper">
<div class="act_content">
<div class="mod_style_3">






</div>

</div>
<div class="act_bg">
<div class="bg_act_6"></div>
<div class="bg_act_7"></div>
<div class="bg_act_8"></div>
</div>
</div>

<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等新版浏览器。</p>
<p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/taoshu.htm">原文</a> <a href="http://hovertree.com/h/bjaf/e1r8s4va.htm">齐天大圣</a></p>
</div>
</body>
</html>

转自:

更多特效:

查看效果:
源码下载:
效果图如下: 代…

15款css3鼠标悬停图片动画过渡特效,15款css3

分享15款css3鼠标悬停图片动画过渡特效。这是一款15款不同效果的css3
hover动画过渡效果代码。效果图如下:

图片 2

在线预览    源码下载

实现的代码。

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>

via:

分享15款css3鼠标悬停图片动画过渡特效。这是一款15款不同效果的css3
hover动画过渡效果代码。效…

css3文字导航鼠标悬停气泡动画特效源码下载,css3源码下载

效果体验:

效果图:
图片 3

 

点击这里下载:

更多特效:

效果体验: 效果图:
点击这里下载:….

纯css3实现的win8加载动画,css3win8加载

今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图:

图片 4

在线预览   源码下载

实现的代码。

html代码:

  <div class="wrapp">
        <div class="text">
            <h1>
                Windows 8</h1>
        </div>
        <div class="logo">

        </div>
    </div>

css3代码:

body{
    margin: 0;
    padding: 0;
    background-color: #90da15;
}
.wrapp{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 300px;
    margin: -150px 0 0 -300px;
    -webkit-perspective: 30px;
    -webkit-transform: translateX(0px);
    -webkit-animation: wrapp 400ms 800ms ease-in forwards;

    -moz-perspective: 30px;
    -moz-transform: translateX(0px);
    -moz-animation: wrapp 400ms 800ms ease-in forwards;

    -ms-perspective: 30px;
    -ms-transform: translateX(0px);
    -ms-animation: wrapp 400ms 800ms ease-in forwards;

    perspective: 30px;
    transform: translateX(0px);
    animation: wrapp 400ms 800ms ease-in forwards;
}
.text{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0px;
    height: 60px;
    margin: -30px 0 0 -160px;
    overflow: hidden;
    -webkit-transform: translateX(0px);
    -webkit-animation: text 400ms 800ms linear forwards;

    -moz-transform: translateX(0px);
    -moz-animation: text 400ms 800ms linear forwards;

    -ms-transform: translateX(0px);
    -ms-animation: text 400ms 800ms linear forwards;

    transform: translateX(0px);
    animation: text 400ms 800ms linear forwards;
}
h1{
    float: right;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    padding: 0;
    margin: 0;
    width: 320px;
    height: 60px;
    font-size: 60px;
    line-height: 60px;
}
.logo{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    background-color: #fff;
    -webkit-transform: translateX(0px) rotateY(10deg);
    -webkit-animation: logo 500ms 300ms ease-out forwards;

    -moz-transform: translateX(0px) rotateY(10deg);
    -moz-animation: logo 500ms 300ms ease-out forwards;

    -ms-transform: translateX(0px) rotateY(10deg);
    -ms-animation: logo 500ms 300ms ease-out forwards;

    transform: translateX(0px) rotateY(10deg);
    animation: logo 500ms 300ms ease-out forwards;
}
.logo .top-left{
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    border-right: solid 2px #90da15;
    border-bottom: solid 2px #90da15;
}
.logo .bottom-right{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 44px;
    height: 44px;
    border-left: solid 2px #90da15;
    border-top: solid 2px #90da15;
}

@-webkit-keyframes logo {
    from {
        -webkit-transform:  translateX(0px) rotateY(10deg);
    }
    to {
        -webkit-transform:  translateX(0px) rotateY(-10deg);
    }
}
@-webkit-keyframes text {
    from {
        width: 0px;
        -webkit-transform: translateX(0px);
    }
    60%{
        width: 0px;
    }
    to {
        width: 320px;
        -webkit-transform: translateX(240px);
    }
}
@-webkit-keyframes wrapp {
    from {
        -webkit-transform: translateX(0px);
    }
    to {
        -webkit-transform: translateX(-200px);
    }
}
@-moz-keyframes logo {
    from {
        -moz-transform:  translateX(0px) rotateY(10deg);
    }
    to {
        -moz-transform:  translateX(0px) rotateY(-10deg);
    }
}
@-moz-keyframes text {
    from {
        width: 0px;
        -moz-transform: translateX(0px);
    }
    60%{
        width: 0px;
    }
    to {
        width: 320px;
        -moz-transform: translateX(240px);
    }
}
@-moz-keyframes wrapp {
    from {
        -moz-transform: translateX(0px);
    }
    to {
        -moz-transform: translateX(-200px);
    }
}

@-ms-keyframes logo {
    from {
        -ms-transform:  translateX(0px) rotateY(10deg);
    }
    to {
        -ms-transform:  translateX(0px) rotateY(-10deg);
    }
}
@-ms-keyframes text {
    from {
        width: 0px;
        -ms-transform: translateX(0px);
    }
    60%{
        width: 0px;
    }
    to {
        width: 320px;
        -ms-transform: translateX(240px);
    }
}
@-ms-keyframes wrapp {
    from {
        -ms-transform: translateX(0px);
    }
    to {
        -ms-transform: translateX(-200px);
    }
}
@keyframes logo {
    from {
        transform:  translateX(0px) rotateY(10deg);
    }
    to {
        transform:  translateX(0px) rotateY(-10deg);
    }
}
@keyframes text {
    from {
        width: 0px;
        transform: translateX(0px);
    }
    60%{
        width: 0px;
    }
    to {
        width: 320px;
        transform: translateX(240px);
    }
}
@keyframes wrapp {
    from {
        transform: translateX(0px);
    }
    to {
        transform: translateX(-200px);
    }
}

本文爱编程原创文章,转载请注明原文地址:

今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果…

发表评论

电子邮件地址不会被公开。 必填项已用*标注