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
Spinning normal
Spinning colored
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
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
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