iHover für Jimdo

Quelle: Alle Items auf dieser Seite sowie das dazugehörige CSS findet Ihr hier im Original:

https://github.com/gudh/ihover

 

Anpassung für Jimdo durch: http://redesign-berlin.de 

 

Animationen für Jimdo

http://jackonthe.net/css3animateit/

...für Jimdo aufbereitet: https://designtest-florence.jimdo.com/

Circle Hover effect 1

html


<div class="ih-item circle effect1">
   <a href="#">
    <div class="spinner"></div>
    <div class="img"><img src="http://51023348.swh.strato-hosting.eu/_test/ihover/dist/images/assets/7.jpg" alt="img" /></div>
    <div class="info">
        <div class="info-back">
            <h3><a href="#" target="_blank" title="">Heading</a></h3>
            <p><a href="#" target="_blank" title="">Description</a></p>
        </div>

    </div>

   </a>
</div>

 

 

more html:  http://gudh.github.io/ihover/dist/index.html

 

hide HowToDo

Circle Hover effect 2

left_to_right normal

left_to_right colored


right_to_left normal

right_to_left colored


top_to_bottom normal

top_to_bottom colored


bottom_to_top normal

bottom_to_top colored


Circle Hover effect 3

Left to right normal

left_to_right colored


right_to_left normal

right_to_left colored


Scale down up normal

Scale down up colored


Square Hover-Effekte

Square Hover-Effekt 3

Bottom to top normal


Bottom to top colored


html:

 

<center>

    <!-- Bottom to top-->

    <div class="row">

        <div class="col-sm-6">

            <!-- normal -->

            <div class="ih-item square effect3 bottom_to_top">

              <div class="img">                  

                <img src="http://gudh.github.io/ihover/dist/images/assets/rect/1.jpg" alt="img" />

              </div>

                <div class="info">

                    <h3><a href="http://gudh.github.io/ihover/dist/index.html"

                           target="_blank" title="">Heading here</a>

                    </h3>

                    <p><a href="http://gudh.github.io/ihover/dist/index.html"

                          target="_blank" title="">Description goes here</a></p>

                </div>

            </div>

            <!-- end normal -->

        </div>

 

        <div class="col-sm-6">

            <!-- colored -->

            <div class="ih-item square colored effect3 bottom_to_top"

              <div class="img">

                <img src="http://gudh.github.io/ihover/dist/images/assets/rect/4.jpg" alt="img" />

              </div>

                <div class="info">

                    <h3><a href="http://gudh.github.io/ihover/dist/index.html" target="_blank"                                title="">Heading here</a>

                    </h3>

                    <p><a href="http://gudh.github.io/ihover/dist/index.html" target="_blank"                               title="">Description goes here</a></p>

                </div>

            </div>

            <!-- end colored -->

        </div>

    </div>

    <!-- end Bottom to top-->

</center>

 

more html:  http://gudh.github.io/ihover/dist/index.html

hide HowToDo

Square Hover-Effekt 4

Square Hover-Effekt 6

Square Hover-Effekt 7

img

Heading here

Description goes here

Square Hover-Effekt  13

css

 

<link type="text/css" media="all" href="http://51023348.swh.strato-hosting.eu/_redesign/test/ihovertest/ih-items.css" rel="stylesheet" />

<link type="text/css" media="all" href="http://51023348.swh.strato-hosting.eu/_redesign/css/styles.css" rel="stylesheet" />

 

<style type="text/css">

/*<![CDATA[*/      

    .center {width:230px; margin: 20px auto;}

    .center-square {width:320px; margin: 20px auto;}

 

    .info a, .info a:link, .info a:visited {color: #fff !important}

    .info a:hover {color: #ccc !important}  

    .info a {pointer-events: auto !important;}

 

 

    @media (min-width:767px) {      

        .col-sm-6 {

        width: 50%;

        margin: 20px auto;

    }

        .col-sm-6 {

        float: left;

    }

}

/*]]>*/

</style>

hide HowToDo