15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效。这是一款15款不同效果的css3 hover动画过渡效果代码。效果图如下：
实现的代码。
html代码：
<div class="htmleaf-container">
<div class="container bs-docs-container">
<div class="row">
<div class="col-md-3">
<div class="bs-sidebar hidden-print">
<ul class="nav bs-sidenav">
<li><a href="#intro">Introduction</a></li>
<li>
<a href="#circle">Demo - 圆形图片</a>
<ul class="nav">
<li><a href="#circle1">Hover effect 1</a></li>
<li><a href="#circle2">Hover effect 2</a></li>
<li><a href="#circle3">Hover effect 3</a></li>
<li><a href="#circle4">Hover effect 4</a></li>
<li><a href="#circle5">Hover effect 5</a></li>
<li><a href="#circle6">Hover effect 6</a></li>
<li><a href="#circle7">Hover effect 7</a></li>
<li><a href="#circle8">Hover effect 8</a></li>
<li><a href="#circle9">Hover effect 9</a></li>
<li><a href="#circle10">Hover effect 10</a></li>
<li><a href="#circle11">Hover effect 11</a></li>
<li><a href="#circle12">Hover effect 12</a></li>
<li><a href="#circle13">Hover effect 13</a></li>
<li><a href="#circle14">Hover effect 14</a></li>
<li><a href="#circle15">Hover effect 15</a></li>
<li><a href="#circle16">Hover effect 16</a></li>
<li><a href="#circle17">Hover effect 17</a></li>
<li><a href="#circle18">Hover effect 18</a></li>
<li><a href="#circle19">Hover effect 19</a></li>
<li><a href="#circle20">Hover effect 20</a></li>
</ul>
</li>
<li>
<a href="#square">Demo - 矩形图片</a>
<ul class="nav">
<li><a href="#square1">Hover effect 1</a></li>
<li><a href="#square2">Hover effect 2</a></li>
<li><a href="#square3">Hover effect 3</a></li>
<li><a href="#square4">Hover effect 4</a></li>
<li><a href="#square5">Hover effect 5</a></li>
<li><a href="#square6">Hover effect 6</a></li>
<li><a href="#square7">Hover effect 7</a></li>
<li><a href="#square8">Hover effect 8</a></li>
<li><a href="#square9">Hover effect 9</a></li>
<li><a href="#square10">Hover effect 10</a></li>
<li><a href="#square11">Hover effect 11</a></li>
<li><a href="#square12">Hover effect 12</a></li>
<li><a href="#square13">Hover effect 13</a></li>
<li><a href="#square14">Hover effect 14</a></li>
<li><a href="#square15">Hover effect 15</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div role="main" class="col-md-9">
<section id="circle">
<div class="page-header">
<h1>Demo - Circle </h1>
</div>
<br> <h3 id="circle1" class="section-heading first-child">Hover effect 1</h3> <div class="bs-example">
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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：http://www.w2bc.com/article/51417
15款css3鼠标悬停图片动画过渡特效的更多相关文章
- 基于9款CSS3鼠标悬停相册预览特效
基于9款CSS3鼠标悬停相册预览特效里面包含九款不同方式的相册展开特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="albums&q ...
- CSS3鼠标悬停图片动画
鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...
- css3 鼠标悬停图片动画
<div class="grid"> <figure class="effect-milo"> <img src="im ...
- HTML5+CSS3鼠标悬停图片特效
点击预览效果 下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- css3鼠标悬停图片边框线条动画特效
css3鼠标经过内容区时,边框线条特效效果制作. html: <div class="strength grWidth hidden"> <div class ...
- 纯css3鼠标经过图片显示描述特效
http://***/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览 ...
随机推荐
- Codeforces 862B （二分图染色）
<题目链接> 题目大意: 给出一个有n个点的二分图和n-1条边,问现在最多可以添加多少条边使得这个图中不存在自环,重边,并且此图还是一个二分图. 解题分析: 此题不难想到,假设二分图点集数 ...
- Jmeter的安装和启动错误总结，出现unable to access jarfile apachejmeter.jar error value=1错误处理
Jmeter是纯Java开发的, 能够运行Java程序的系统一般都可以运行Jmeter, 如:Windows. Linux. mac等. 由于是由Java开发,所以自然需要jdk环境. Windows ...
- 运行程序，解读this指向---case2
片段1 var anum = 666; function funcTest1(){ var b = anum * 2; var anum = 6; var c = anum / 2; console. ...
- BZOJ.3545.[ONTAK2010]Peaks(线段树合并)
题目链接 \(Description\) 有n个座山,其高度为hi.有m条带权双向边连接某些山.多次询问,每次询问从v出发 只经过边权<=x的边 所能到达的山中,第K高的是多少. \(Solut ...
- 20172302《程序设计与数据结构》实验三 敏捷开发与XP实践报告
课程:<程序设计与数据结构> 班级: 1723 姓名: 侯泽洋 学号:20172302 实验教师:王志强老师 实验日期:2018年5月16日 必修/选修: 必修 1.实验内容 (1)代码规 ...
- window10总提示幸福倒计时，解决方法
删除window用于标识计算机更新的临时文件,需要先停止功能Windows Update. 在开始菜单的“搜索程序和文件”框输入“Services.msc”命令打开服务窗口 打开Windows Upd ...
- 如何使用PowerDesigner设计数据库关系模式
/*==============================================================*/ /* DBMS name: Microsoft SQL Serve ...
- 标 题: [心得]传统IT转互联网面试经验分享
发信人: lgonnet (逃之夭夭), 信区: Java标 题: [心得]传统IT转互联网面试经验分享发信站: 水木社区 (Wed Jul 1 10:18:38 2015), 站内 统一回复一下 ...
- JTAG 引脚自动识别 JTAG Finder, JTAG Pinout Tool, JTAG Pin Finder, JTAG pinout detector, JTAGULATOR, Easy-JTAG, JTAG Enumeration
JTAG Finder Figuring out the JTAG Pinouts on a Device is usually the most time-consuming and frustra ...
- DateTables的服务器分页
function InitTable() { var table = $('#tbl_users').DataTable(); if ($.fn.dataTable.isDataTable('#tbl ...