extends layout


block docs-sidebar
    li
        a(href="#intro") Introduction
    li
        a(href="#circle") Demo - Circle
        ul.nav
            li
                a(href="#circle1") Hover effect 1
            li
                a(href="#circle2") Hover effect 2
            li
                a(href="#circle3") Hover effect 3
            li
                a(href="#circle4") Hover effect 4
            li
                a(href="#circle5") Hover effect 5
            li
                a(href="#circle6") Hover effect 6
            li
                a(href="#circle7") Hover effect 7
            li
                a(href="#circle8") Hover effect 8
            li
                a(href="#circle9") Hover effect 9
            li
                a(href="#circle10") Hover effect 10
            li
                a(href="#circle11") Hover effect 11
            li
                a(href="#circle12") Hover effect 12
            li
                a(href="#circle13") Hover effect 13
            li
                a(href="#circle14") Hover effect 14
            li
                a(href="#circle15") Hover effect 15
            li
                a(href="#circle16") Hover effect 16
            li
                a(href="#circle17") Hover effect 17
            li
                a(href="#circle18") Hover effect 18
            li
                a(href="#circle19") Hover effect 19
            li
                a(href="#circle20") Hover effect 20

    li
        a(href="#square") Demo - Square
        ul.nav
            li
                a(href="#square1") Hover effect 1
            li
                a(href="#square2") Hover effect 2
            li
                a(href="#square3") Hover effect 3
            li
                a(href="#square4") Hover effect 4
            li
                a(href="#square5") Hover effect 5
            li
                a(href="#square6") Hover effect 6
            li
                a(href="#square7") Hover effect 7
            li
                a(href="#square8") Hover effect 8
            li
                a(href="#square9") Hover effect 9
            li
                a(href="#square10") Hover effect 10
            li
                a(href="#square11") Hover effect 11
            li
                a(href="#square12") Hover effect 12
            li
                a(href="#square13") Hover effect 13
            li
                a(href="#square14") Hover effect 14
            li
                a(href="#square15") Hover effect 15

    li
        a(href="#feat") Features
    li
        a(href="#usage") How to use it?


block content
    //- variables
    - var name = "ih-item"
    - var show = true // show additional info, e.g. example code, info section for documentation

    section#intro
        .page-header
            h1 Introduction
        p.lead iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!


    section#circle
        .page-header
            h1 Demo - Circle 



        br
        h3.section-heading.first-child#circle1 Hover effect 1
        .bs-example
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect1")
                        a(href="#")
                            .spinner
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect1")
                        a(href="#")
                            .spinner
                            .img
                                img(src="images/assets/5.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
        if true
            .highlight
                pre.prettyprint
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect1"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="spinner"&gt;&lt;/div&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    | 
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect1"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="spinner"&gt;&lt;/div&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;


        br
        h3.section-heading.first-child#circle2 Hover effect 2
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect2 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect2 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect2 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect2 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect2 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect2 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect2 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect2 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top
        if show
            .highlight
                pre.prettyprint
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect2 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect2 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    | 
                    | 
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect2 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect2 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    | 
                    | 
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect2 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect2 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;
                    | 
                    | 
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect2 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect2 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;            

        br
        h3.section-heading#circle3 Hover effect 3
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect3 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect3 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect3 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect3 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect3 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect3 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top

            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect3 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect3 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to bottom
        if show
            .highlight
                pre.prettyprint
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect3 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect3 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    | 
                    | 
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect3 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect3 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    | 
                    | 
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect3 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect3 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    | 
                    | 
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect3 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect3 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;

        br
        h3.section-heading#circle4 Hover effect 4
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect4 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect4 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect4 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect4 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect4 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect4 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect4 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect4 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top

        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect4 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect4 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect4 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect4 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  
                    |  
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect4 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect4 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect4 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect4 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  


        br
        h3.section-heading#circle5 Hover effect 5
        .bs-example
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect5")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect5")
                        a(href="#")
                            .img
                                img(src="images/assets/3.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
        if show
            .highlight
                pre.prettyprint
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect5"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect5"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;



        br
        h3.section-heading#circle6 Hover effect 6
        .bs-example
            // Scale up
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect6 scale_up")
                        a(href="#")
                            .img
                                img(src="images/assets/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect6 scale_up")
                        a(href="#")
                            .img
                                img(src="images/assets/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored
            // end Scale up

            // Scale down
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect6 scale_down")
                        a(href="#")
                            .img
                                img(src="images/assets/8.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect6 scale_down")
                        a(href="#")
                            .img
                                img(src="images/assets/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored
            // end Scale down

            // Scale down up
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect6 scale_down_up")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect6 scale_down_up")
                        a(href="#")
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored
            // end Scale down up

        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Scale up--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect6 scale_up"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect6 scale_up"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored--&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Scale up--&gt;
                    |  
                    |  
                    | &lt;!-- Scale down--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect6 scale_down"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/8.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect6 scale_down"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored--&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Scale down--&gt;
                    |  
                    |  
                    | &lt;!-- Scale down up--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect6 scale_down_up"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect6 scale_down_up"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored--&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Scale down up--&gt;
                    |  



        br
        h3.section-heading#circle7 Hover effect 7
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect7 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect7 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect7 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect7 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect7 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect7 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect7 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect7 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top

        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect7 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect7 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect7 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect7 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  
                    |  
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect7 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect7 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect7 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect7 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  


        br
        h3.section-heading#circle8 Hover effect 8
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect8 left_to_right")
                        a(href="#")
                            .img-container
                                .img
                                    img(src="images/assets/4.jpg" alt="img")
                            .info-container
                                .info
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect8 left_to_right")
                        a(href="#")
                            .img-container
                                .img
                                    img(src="images/assets/5.jpg" alt="img")
                            .info-container
                                .info
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect8 right_to_left")
                        a(href="#")
                            .img-container
                                .img
                                    img(src="images/assets/6.jpg" alt="img")
                            .info-container
                                .info
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect8 right_to_left")
                        a(href="#")
                            .img-container
                                .img
                                    img(src="images/assets/7.jpg" alt="img")
                            .info-container
                                .info
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
            // end Right to left

            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect8 top_to_bottom")
                        a(href="#")
                            .img-container
                                .img
                                    img(src="images/assets/1.jpg" alt="img")
                            .info-container
                                .info
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect8 top_to_bottom")
                        a(href="#")
                            .img-container
                                .img
                                    img(src="images/assets/2.jpg" alt="img")
                            .info-container
                                .info
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
            // end Top to bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect8 bottom_to_top")
                        a(href="#")
                            .img-container
                                .img
                                    img(src="images/assets/3.jpg" alt="img")
                            .info-container
                                .info
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect8 bottom_to_top")
                        a(href="#")
                            .img-container
                                .img
                                    img(src="images/assets/4.jpg" alt="img")
                            .info-container
                                .info
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
            // end Bottom to top
        if show
            .highlight
                pre.prettyprint
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect8 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img-container"&gt;
                    |           &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;/div&gt;
                    |         &lt;div class="info-container"&gt;
                    |           &lt;div class="info"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect8 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img-container"&gt;
                    |           &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;/div&gt;
                    |         &lt;div class="info-container"&gt;
                    |           &lt;div class="info"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    | 
                    | 
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect8 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img-container"&gt;
                    |           &lt;div class="img"&gt;&lt;img src="images/assets/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;/div&gt;
                    |         &lt;div class="info-container"&gt;
                    |           &lt;div class="info"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect8 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img-container"&gt;
                    |           &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;/div&gt;
                    |         &lt;div class="info-container"&gt;
                    |           &lt;div class="info"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    | 
                    | 
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect8 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img-container"&gt;
                    |           &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;/div&gt;
                    |         &lt;div class="info-container"&gt;
                    |           &lt;div class="info"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect8 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img-container"&gt;
                    |           &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;/div&gt;
                    |         &lt;div class="info-container"&gt;
                    |           &lt;div class="info"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;
                    | 
                    | 
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect8 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img-container"&gt;
                    |           &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;/div&gt;
                    |         &lt;div class="info-container"&gt;
                    |           &lt;div class="info"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect8 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img-container"&gt;
                    |           &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;/div&gt;
                    |         &lt;div class="info-container"&gt;
                    |           &lt;div class="info"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;


        br
        h3.section-heading#circle9 Hover effect 9
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect9 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect9 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect9 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect9 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect9 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect9 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect9 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect9 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top

        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect9 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect9 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect9 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect9 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  
                    |  
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect9 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect9 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect9 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect9 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  

        br
        h3.section-heading#circle10 Hover effect 10
        .bs-example
            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect10 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect10 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect10 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect10 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top
        if show
            .highlight
                pre.prettyprint
                    | &lt;div class="bs-example"&gt;
                    | 
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect10 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect10 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;
                    | 
                    | 
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect10 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect10 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;


        br
        h3.section-heading#circle11 Hover effect 11
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect11 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect11 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect11 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect11 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect11 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect11 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect11 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect11 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top

        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect11 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect11 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect11 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect11 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  
                    |  
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect11 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect11 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect11 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect11 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  



        br
        h3.section-heading#circle12 Hover effect 12
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect12 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect12 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect12 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect12 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect12 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect12 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect12 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect12 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top
        if show
            .highlight
                pre.prettyprint
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect12 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect12 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    | 
                    | 
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect12 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect12 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    | 
                    | 
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect12 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect12 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;
                    | 
                    | 
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect12 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    | 
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    | 
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect12 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    | 
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;


        br
        h3.section-heading#circle13 Hover effect 13
        .bs-example
            // From left and right 
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect13 from_left_and_right")
                        a(href="#")
                            .img
                                img(src="images/assets/7.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect13 from_left_and_right")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
            // end From left and right 

            // Top to bottom 
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect13 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect13 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/3.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
            // end Top to bottom 

            // Bottom to top 
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect13 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect13 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/5.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
            // end Bottom to top 

        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- From left and right --&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect13 from_left_and_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect13 from_left_and_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end From left and right --&gt;
                    |  
                    |  
                    | &lt;!-- Top to bottom --&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect13 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect13 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom --&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top --&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect13 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect13 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top --&gt;
                    |  




        br
        h3.section-heading#circle14 Hover effect 14
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect14 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect14 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect14 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect14 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect14 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect14 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect14 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect14 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top

        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect14 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect14 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect14 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect14 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  
                    |  
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect14 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect14 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect14 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect14 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  


        br
        h3.section-heading#circle15 Hover effect 15
        .bs-example
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} circle effect15 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} circle colored effect15 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
        if show
            .highlight
                pre.prettyprint
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item circle effect15 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item circle colored effect15 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;



        //- 16...
        if show
            br
            h3.section-heading#circle16 Hover effect 16
            .bs-example
                // Left to right 
                .row
                    .col-sm-6
                        // normal 
                        div(class="#{name} circle effect16 left_to_right")
                            a(href="#")
                                .img
                                    img(src="images/assets/7.jpg" alt="img")
                                .info
                                    h3 Heading here
                                    p Description goes here
                        // end normal 
                    .col-sm-6
                        // colored 
                        div(class="#{name} circle colored effect16 left_to_right")
                            a(href="#")
                                .img
                                    img(src="images/assets/2.jpg" alt="img")
                                .info
                                    h3 Heading here
                                    p Description goes here
                        // end colored 
                // end Left to right 

                // Right to left
                .row
                    .col-sm-6
                        // normal 
                        div(class="#{name} circle effect16 right_to_left")
                            a(href="#")
                                .img
                                    img(src="images/assets/4.jpg" alt="img")
                                .info
                                    h3 Heading here
                                    p Description goes here
                        // end normal 
                    .col-sm-6
                        // colored 
                        div(class="#{name} circle colored effect16 right_to_left")
                            a(href="#")
                                .img
                                    img(src="images/assets/5.jpg" alt="img")
                                .info
                                    h3 Heading here
                                    p Description goes here
                        // end colored
                // end Right to left 
            if show
                .highlight
                    pre.prettyprint
                        |  
                        | &lt;!-- Left to right --&gt;
                        | &lt;div class="row"&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- normal --&gt;
                        |     &lt;div class="ih-item circle effect16 left_to_right"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;h3&gt;Heading here&lt;/h3&gt;
                        |           &lt;p&gt;Description goes here&lt;/p&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end normal --&gt;
                        |  
                        |   &lt;/div&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- colored --&gt;
                        |     &lt;div class="ih-item circle colored effect16 left_to_right"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;h3&gt;Heading here&lt;/h3&gt;
                        |           &lt;p&gt;Description goes here&lt;/p&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end colored --&gt;
                        |  
                        |   &lt;/div&gt;
                        | &lt;/div&gt;
                        | &lt;!-- end Left to right --&gt;
                        |  
                        |  
                        | &lt;!-- Right to left--&gt;
                        | &lt;div class="row"&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- normal --&gt;
                        |     &lt;div class="ih-item circle effect16 right_to_left"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;h3&gt;Heading here&lt;/h3&gt;
                        |           &lt;p&gt;Description goes here&lt;/p&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end normal --&gt;
                        |  
                        |   &lt;/div&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- colored --&gt;
                        |     &lt;div class="ih-item circle colored effect16 right_to_left"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;h3&gt;Heading here&lt;/h3&gt;
                        |           &lt;p&gt;Description goes here&lt;/p&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end colored--&gt;
                        |  
                        |   &lt;/div&gt;
                        | &lt;/div&gt;
                        | &lt;!-- end Right to left --&gt;
                        |  


            br
            h3.section-heading#circle17 Hover effect 17
            .bs-example
                .row
                    .col-sm-6
                        // normal 
                        div(class="#{name} circle effect17")
                            a(href="#")
                                .img
                                    img(src="images/assets/6.jpg" alt="img")
                                .info
                                    h3 Heading here
                                    p Description goes here
                        // end normal 
                    .col-sm-6
                        // colored 
                        div(class="#{name} circle colored effect17")
                            a(href="#")
                                .img
                                    img(src="images/assets/5.jpg" alt="img")
                                .info
                                    h3 Heading here
                                    p Description goes here
                        // end colored 
            if show
                .highlight
                    pre.prettyprint
                        | &lt;div class="row"&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- normal --&gt;
                        |     &lt;div class="ih-item circle effect17"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/6.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;h3&gt;Heading here&lt;/h3&gt;
                        |           &lt;p&gt;Description goes here&lt;/p&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end normal --&gt;
                        |  
                        |   &lt;/div&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- colored --&gt;
                        |     &lt;div class="ih-item circle colored effect17"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;h3&gt;Heading here&lt;/h3&gt;
                        |           &lt;p&gt;Description goes here&lt;/p&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end colored --&gt;
                        |  
                        |   &lt;/div&gt;
                        | &lt;/div&gt;


            br
            h3.section-heading#circle18 Hover effect 18
            .bs-callout.bs-callout-warning
                p Note: This will not work in IE9, since IE9 doesn't support 3d rotate.
            .bs-example
                // Bottom to top 
                .row
                    .col-sm-6
                        // normal 
                        div(class="#{name} circle effect18 bottom_to_top")
                            a(href="#")
                                .img
                                    img(src="images/assets/1.jpg" alt="img")
                                .info
                                    .info-back
                                        h3 Heading here
                                        p Description goes here
                        // end normal 
                    .col-sm-6
                        // colored 
                        div(class="#{name} circle colored effect18 bottom_to_top")
                            a(href="#")
                                .img
                                    img(src="images/assets/3.jpg" alt="img")
                                .info
                                    .info-back
                                        h3 Heading here
                                        p Description goes here
                        // end colored
                // end Bottom to top 

                // Left to right 
                .row
                    .col-sm-6
                        // normal 
                        div(class="#{name} circle effect18 left_to_right")
                            a(href="#")
                                .img
                                    img(src="images/assets/5.jpg" alt="img")
                                .info
                                    .info-back
                                        h3 Heading here
                                        p Description goes here
                        // end normal 
                    .col-sm-6
                        // colored 
                        div(class="#{name} circle colored effect18 left_to_right")
                            a(href="#")
                                .img
                                    img(src="images/assets/7.jpg" alt="img")
                                .info
                                    .info-back
                                        h3 Heading here
                                        p Description goes here
                        // end colored
                // end Left to right 

                // Right to left  
                .row
                    .col-sm-6
                        // normal 
                        div(class="#{name} circle effect18 right_to_left")
                            a(href="#")
                                .img
                                    img(src="images/assets/6.jpg" alt="img")
                                .info
                                    .info-back
                                        h3 Heading here
                                        p Description goes here
                        // end normal 
                    .col-sm-6
                        // colored 
                        div(class="#{name} circle colored effect18 right_to_left")
                            a(href="#")
                                .img
                                    img(src="images/assets/8.jpg" alt="img")
                                .info
                                    .info-back
                                        h3 Heading here
                                        p Description goes here
                        // end colored
                // end Right to left  

                // Top to bottom 
                .row
                    .col-sm-6
                        // normal 
                        div(class="#{name} circle effect18 top_to_bottom")
                            a(href="#")
                                .img
                                    img(src="images/assets/2.jpg" alt="img")
                                .info
                                    .info-back
                                        h3 Heading here
                                        p Description goes here
                        // end normal 
                    .col-sm-6
                        // colored 
                        div(class="#{name} circle colored effect18 top_to_bottom")
                            a(href="#")
                                .img
                                    img(src="images/assets/4.jpg" alt="img")
                                .info
                                    .info-back
                                        h3 Heading here
                                        p Description goes here
                        // end colored
                // end Top to bottom 
            if show
                .highlight
                    pre.prettyprint
                        |  
                        | &lt;!-- Bottom to top --&gt;
                        | &lt;div class="row"&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- normal --&gt;
                        |     &lt;div class="ih-item circle effect18 bottom_to_top"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;div class="info-back"&gt;
                        |             &lt;h3&gt;Heading here&lt;/h3&gt;
                        |             &lt;p&gt;Description goes here&lt;/p&gt;
                        |           &lt;/div&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end normal --&gt;
                        |  
                        |   &lt;/div&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- colored --&gt;
                        |     &lt;div class="ih-item circle colored effect18 bottom_to_top"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;div class="info-back"&gt;
                        |             &lt;h3&gt;Heading here&lt;/h3&gt;
                        |             &lt;p&gt;Description goes here&lt;/p&gt;
                        |           &lt;/div&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end colored--&gt;
                        |  
                        |   &lt;/div&gt;
                        | &lt;/div&gt;
                        | &lt;!-- end Bottom to top --&gt;
                        |  
                        |  
                        | &lt;!-- Left to right --&gt;
                        | &lt;div class="row"&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- normal --&gt;
                        |     &lt;div class="ih-item circle effect18 left_to_right"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;div class="info-back"&gt;
                        |             &lt;h3&gt;Heading here&lt;/h3&gt;
                        |             &lt;p&gt;Description goes here&lt;/p&gt;
                        |           &lt;/div&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end normal --&gt;
                        |  
                        |   &lt;/div&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- colored --&gt;
                        |     &lt;div class="ih-item circle colored effect18 left_to_right"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/7.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;div class="info-back"&gt;
                        |             &lt;h3&gt;Heading here&lt;/h3&gt;
                        |             &lt;p&gt;Description goes here&lt;/p&gt;
                        |           &lt;/div&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end colored--&gt;
                        |  
                        |   &lt;/div&gt;
                        | &lt;/div&gt;
                        | &lt;!-- end Left to right --&gt;
                        |  
                        |  
                        | &lt;!-- Right to left  --&gt;
                        | &lt;div class="row"&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- normal --&gt;
                        |     &lt;div class="ih-item circle effect18 right_to_left"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/6.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;div class="info-back"&gt;
                        |             &lt;h3&gt;Heading here&lt;/h3&gt;
                        |             &lt;p&gt;Description goes here&lt;/p&gt;
                        |           &lt;/div&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end normal --&gt;
                        |  
                        |   &lt;/div&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- colored --&gt;
                        |     &lt;div class="ih-item circle colored effect18 right_to_left"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/8.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;div class="info-back"&gt;
                        |             &lt;h3&gt;Heading here&lt;/h3&gt;
                        |             &lt;p&gt;Description goes here&lt;/p&gt;
                        |           &lt;/div&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end colored--&gt;
                        |  
                        |   &lt;/div&gt;
                        | &lt;/div&gt;
                        | &lt;!-- end Right to left  --&gt;
                        |  
                        |  
                        | &lt;!-- Top to bottom --&gt;
                        | &lt;div class="row"&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- normal --&gt;
                        |     &lt;div class="ih-item circle effect18 top_to_bottom"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;div class="info-back"&gt;
                        |             &lt;h3&gt;Heading here&lt;/h3&gt;
                        |             &lt;p&gt;Description goes here&lt;/p&gt;
                        |           &lt;/div&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end normal --&gt;
                        |  
                        |   &lt;/div&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- colored --&gt;
                        |     &lt;div class="ih-item circle colored effect18 top_to_bottom"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;div class="info-back"&gt;
                        |             &lt;h3&gt;Heading here&lt;/h3&gt;
                        |             &lt;p&gt;Description goes here&lt;/p&gt;
                        |           &lt;/div&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end colored--&gt;
                        |  
                        |   &lt;/div&gt;
                        | &lt;/div&gt;
                        | &lt;!-- end Top to bottom --&gt;
                        |  


            br
            h3.section-heading#circle19 Hover effect 19
            .bs-example
                .row
                    .col-sm-6
                        // normal 
                        div(class="#{name} circle effect19")
                            a(href="#")
                                .img
                                    img(src="images/assets/1.jpg" alt="img")
                                .info
                                    h3 Heading here
                                    p Description goes here
                        // end normal 
                    .col-sm-6
                        // colored 
                        div(class="#{name} circle colored effect19")
                            a(href="#")
                                .img
                                    img(src="images/assets/3.jpg" alt="img")
                                .info
                                    h3 Heading here
                                    p Description goes here
                        // end colored 
            if show
                .highlight
                    pre.prettyprint
                        | &lt;div class="row"&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- normal --&gt;
                        |     &lt;div class="ih-item circle effect19"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/1.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;h3&gt;Heading here&lt;/h3&gt;
                        |           &lt;p&gt;Description goes here&lt;/p&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end normal --&gt;
                        |  
                        |   &lt;/div&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- colored --&gt;
                        |     &lt;div class="ih-item circle colored effect19"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;h3&gt;Heading here&lt;/h3&gt;
                        |           &lt;p&gt;Description goes here&lt;/p&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end colored --&gt;
                        |  
                        |   &lt;/div&gt;
                        | &lt;/div&gt;


            br
            h3.section-heading#circle20 Hover effect 20
            .bs-example
                // Top to bottom 
                .row
                    .col-sm-6
                        // normal 
                        div(class="#{name} circle effect20 top_to_bottom")
                            a(href="#")
                                .img
                                    img(src="images/assets/2.jpg" alt="img")
                                .info
                                    .info-back
                                        h3 Heading here
                                        p Description goes here
                        // end normal 
                    .col-sm-6
                        // colored 
                        div(class="#{name} circle colored effect20 top_to_bottom")
                            a(href="#")
                                .img
                                    img(src="images/assets/4.jpg" alt="img")
                                .info
                                    .info-back
                                        h3 Heading here
                                        p Description goes here
                        // end colored 
                // end Top to bottom 

                // Bottom to top 
                .row
                    .col-sm-6
                        // normal 
                        div(class="#{name} circle effect20 bottom_to_top")
                            a(href="#")
                                .img
                                    img(src="images/assets/3.jpg" alt="img")
                                .info
                                    .info-back
                                        h3 Heading here
                                        p Description goes here
                        // end normal 
                    .col-sm-6
                        // colored 
                        div(class="#{name} circle colored effect20 bottom_to_top")
                            a(href="#")
                                .img
                                    img(src="images/assets/5.jpg" alt="img")
                                .info
                                    .info-back
                                        h3 Heading here
                                        p Description goes here
                        // end colored 
                // end Bottom to top 
            if show
                .highlight
                    pre.prettyprint
                        |  
                        | &lt;!-- Top to bottom --&gt;
                        | &lt;div class="row"&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- normal --&gt;
                        |     &lt;div class="ih-item circle effect20 top_to_bottom"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/2.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;div class="info-back"&gt;
                        |             &lt;h3&gt;Heading here&lt;/h3&gt;
                        |             &lt;p&gt;Description goes here&lt;/p&gt;
                        |           &lt;/div&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end normal --&gt;
                        |  
                        |   &lt;/div&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- colored --&gt;
                        |     &lt;div class="ih-item circle colored effect20 top_to_bottom"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/4.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;div class="info-back"&gt;
                        |             &lt;h3&gt;Heading here&lt;/h3&gt;
                        |             &lt;p&gt;Description goes here&lt;/p&gt;
                        |           &lt;/div&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end colored --&gt;
                        |  
                        |   &lt;/div&gt;
                        | &lt;/div&gt;
                        | &lt;!-- end Top to bottom --&gt;
                        |  
                        |  
                        | &lt;!-- Bottom to top --&gt;
                        | &lt;div class="row"&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- normal --&gt;
                        |     &lt;div class="ih-item circle effect20 bottom_to_top"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/3.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;div class="info-back"&gt;
                        |             &lt;h3&gt;Heading here&lt;/h3&gt;
                        |             &lt;p&gt;Description goes here&lt;/p&gt;
                        |           &lt;/div&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end normal --&gt;
                        |  
                        |   &lt;/div&gt;
                        |   &lt;div class="col-sm-6"&gt;
                        |  
                        |     &lt;!-- colored --&gt;
                        |     &lt;div class="ih-item circle colored effect20 bottom_to_top"&gt;&lt;a href="#"&gt;
                        |         &lt;div class="img"&gt;&lt;img src="images/assets/5.jpg" alt="img"&gt;&lt;/div&gt;
                        |         &lt;div class="info"&gt;
                        |           &lt;div class="info-back"&gt;
                        |             &lt;h3&gt;Heading here&lt;/h3&gt;
                        |             &lt;p&gt;Description goes here&lt;/p&gt;
                        |           &lt;/div&gt;
                        |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                        |     &lt;!-- end colored --&gt;
                        |  
                        |   &lt;/div&gt;
                        | &lt;/div&gt;
                        | &lt;!-- end Bottom to top --&gt;
                        |  

    section#square
        .page-header
            h1 Demo - Square 


        br
        h3.section-heading#square1 Hover effect 1
        .bs-example
            // Left and right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect1 left_and_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect1 left_and_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left and right

            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect1 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect1 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect1 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect1 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top
        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left and right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect1 left_and_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect1 left_and_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left and right--&gt;
                    |  
                    |  
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect1 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect1 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect1 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect1 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  


        br
        h3.section-heading#square2 Hover effect 2
        .bs-example
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect2")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/10.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect2")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
        if show
            .highlight
                pre.prettyprint
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect2"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/10.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect2"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;  


        br
        h3.section-heading#square3 Hover effect 3
        .bs-example
            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect3 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect3 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top

            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect3 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect3 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to bottom

        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect3 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect3 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  
                    |  
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect3 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect3 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;
                    |  


        br
        h3.section-heading#square4 Hover effect 4
        .bs-example
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect4")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/9.jpg" alt="img")
                            .mask1
                            .mask2
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect4")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/2.jpg" alt="img")
                            .mask1
                            .mask2
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
        if show
            .highlight
                pre.prettyprint
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect4"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/9.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="mask1"&gt;&lt;/div&gt;
                    |         &lt;div class="mask2"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect4"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="mask1"&gt;&lt;/div&gt;
                    |         &lt;div class="mask2"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;


        br
        h3.section-heading#square5 Hover effect 5
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect5 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/9.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect5 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/10.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect5 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/8.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect5 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect5 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/9.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect5 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/10.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect5 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/8.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect5 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  


        br
        h3.section-heading#square6 Hover effect 6
        .bs-example
            // From top and bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect6 from_top_and_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect6 from_top_and_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end From top and bottom

            // From left and right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect6 from_left_and_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect6 from_left_and_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end From left and right

            // Top to bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect6 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect6 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect6 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect6 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/8.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top

        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- From top and bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect6 from_top_and_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect6 from_top_and_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end From top and bottom--&gt;
                    |  
                    |  
                    | &lt;!-- From left and right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect6 from_left_and_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect6 from_left_and_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end From left and right--&gt;
                    |  
                    |  
                    | &lt;!-- Top to bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect6 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect6 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect6 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect6 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/8.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt; 
                    |  


        br
        h3.section-heading#square7 Hover effect 7
        .bs-example
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect7")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect7")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
        if show
            .highlight
                pre.prettyprint
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect7"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect7"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;


        br
        h3.section-heading#square8 Hover effect 8
        .bs-example
            // Scale up
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect8 scale_up")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect8 scale_up")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Scale up

            // Scale down
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect8 scale_down")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect8 scale_down")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/8.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Scale down

        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Scale up--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect8 scale_up"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect8 scale_up"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Scale up--&gt;
                    |  
                    |  
                    | &lt;!-- Scale down--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect8 scale_down"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect8 scale_down"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/8.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Scale down--&gt;
                    |  



        br
        h3.section-heading#square9 Hover effect 9
        .bs-callout.bs-callout-warning
            p Note: This will not work in IE9, since IE9 doesn't support 3d rotate.
        .bs-example

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect9 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/7.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect9 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/8.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
            // end Bottom to top

            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect9 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/1.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect9 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/2.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect9 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/3.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect9 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/4.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
            // end Right to left

            // Top to Bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect9 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/5.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect9 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/6.jpg" alt="img")
                            .info
                                .info-back
                                    h3 Heading here
                                    p Description goes here
                    // end colored 
            // end Top to Bottom

        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect9 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect9 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/8.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect9 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect9 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect9 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect9 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  
                    |  
                    | &lt;!-- Top to Bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect9 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect9 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;div class="info-back"&gt;
                    |             &lt;h3&gt;Heading here&lt;/h3&gt;
                    |             &lt;p&gt;Description goes here&lt;/p&gt;
                    |           &lt;/div&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to Bottom--&gt;
                    |  




        br
        h3.section-heading#square10 Hover effect 10
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect10 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect10 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect10 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect10 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to Bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect10 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect10 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to Bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect10 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect10 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/8.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top
        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect10 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect10 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect10 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect10 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  
                    |  
                    | &lt;!-- Top to Bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect10 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect10 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to Bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect10 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect10 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/8.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  


        br
        h3.section-heading#square11 Hover effect 11
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect11 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect11 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect11 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect11 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to Bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect11 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect11 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to Bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect11 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect11 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/8.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top
        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect11 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect11 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect11 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect11 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  
                    |  
                    | &lt;!-- Top to Bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect11 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect11 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to Bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect11 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect11 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/8.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  
 

        br
        h3.section-heading#square12 Hover effect 12
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect12 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect12 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect12 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect12 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/8.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to Bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect12 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect12 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to Bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect12 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect12 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top
        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect12 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect12 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect12 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect12 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/8.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  
                    |  
                    | &lt;!-- Top to Bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect12 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect12 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to Bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect12 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect12 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  


        br
        h3.section-heading#square13 Hover effect 13
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect13 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect13 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect13 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect13 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to Bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect13 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect13 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to Bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect13 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect13 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/8.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top
        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect13 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect13 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect13 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect13 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  
                    |  
                    | &lt;!-- Top to Bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect13 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect13 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to Bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect13 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect13 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/8.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  



        br
        h3.section-heading#square14 Hover effect 14
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect14 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect14 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect14 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect14 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to Bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect14 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect14 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to Bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect14 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect14 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/8.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top
        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect14 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect14 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect14 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect14 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  
                    |  
                    | &lt;!-- Top to Bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect14 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect14 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to Bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect14 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect14 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/8.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  


        br
        h3.section-heading#square15 Hover effect 15
        .bs-example
            // Left to right
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect15 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/1.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect15 left_to_right")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/2.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Left to right

            // Right to left
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect15 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/3.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect15 right_to_left")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/4.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Right to left

            // Top to Bottom
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect15 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/5.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect15 top_to_bottom")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/6.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Top to Bottom

            // Bottom to top
            .row
                .col-sm-6
                    // normal 
                    div(class="#{name} square effect15 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/7.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end normal 
                .col-sm-6
                    // colored 
                    div(class="#{name} square colored effect15 bottom_to_top")
                        a(href="#")
                            .img
                                img(src="images/assets/rect/8.jpg" alt="img")
                            .info
                                h3 Heading here
                                p Description goes here
                    // end colored 
            // end Bottom to top
        if show
            .highlight
                pre.prettyprint
                    |  
                    | &lt;!-- Left to right--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect15 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/1.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect15 left_to_right"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/2.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Left to right--&gt;
                    |  
                    |  
                    | &lt;!-- Right to left--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect15 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/3.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect15 right_to_left"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/4.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Right to left--&gt;
                    |  
                    |  
                    | &lt;!-- Top to Bottom--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect15 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/5.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect15 top_to_bottom"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/6.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Top to Bottom--&gt;
                    |  
                    |  
                    | &lt;!-- Bottom to top--&gt;
                    | &lt;div class="row"&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- normal --&gt;
                    |     &lt;div class="ih-item square effect15 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/7.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end normal --&gt;
                    |  
                    |   &lt;/div&gt;
                    |   &lt;div class="col-sm-6"&gt;
                    |  
                    |     &lt;!-- colored --&gt;
                    |     &lt;div class="ih-item square colored effect15 bottom_to_top"&gt;&lt;a href="#"&gt;
                    |         &lt;div class="img"&gt;&lt;img src="images/assets/rect/8.jpg" alt="img"&gt;&lt;/div&gt;
                    |         &lt;div class="info"&gt;
                    |           &lt;h3&gt;Heading here&lt;/h3&gt;
                    |           &lt;p&gt;Description goes here&lt;/p&gt;
                    |         &lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
                    |     &lt;!-- end colored --&gt;
                    |  
                    |   &lt;/div&gt;
                    | &lt;/div&gt;
                    | &lt;!-- end Bottom to top--&gt;
                    |  


    section#feat
        .page-header
            h1 Features
        ul
            li Pure 
                strong CSS3
                |  powered, no dependency, can be used in any project.
            li Built with 
                strong Scss CSS (file included)
                | , easy modification with variables.
            li 
                strong Modular code
                | , no need to include the entire file.
            li 
                strong 30+
                |  hover effects in one pack.
            li Well documented.
            li Work well with Bootstrap 3 (Bootstrap is not necessary though).


    if show
        section#usage
            .page-header
                h1 How to use it?
            p.lead iHover is pretty easy to use. All you need to do is to write some HTML markup.
                |  You just need to include the CSS file and you are ready to go.
            .highlight
                pre.prettyprint 
                    | &lt;link href="styles/ihover.css" rel="stylesheet"&gt;
            P.lead  Introduce to the folders:
            .highlight
                pre.prettyprint
                    | ihover/
                    | ├── client/                       --&gt; Dev folder for the project. 
                    | ├── dist/                         --&gt; Distribution for demo purpose 
                    | ├── src/                          --&gt; Source files
                    | │   ├── ihover.css                       ├──&gt; Unminified version
                    | │   └── ihover.min.css                   └──&gt; Minified version
                    | └── preview/                      --&gt; Some preview photos :)          

            p.lead If you want to build your own production CSS file, you can use the Scss CSS files.
