Hover Bild&Text2

Ihr könnt hier per HTML alles einbinden

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

zum Zeta-Forum    /    ZP-Widgets


mobile_script einfügen:

Doppelklick auf die entsprechende Seite > Attribute > unten auf Attribute und den Haken bei (alle anzeigen setzen) > Standart > mobile_script > code einfügen > ok > ok

<style>

.bild {

width: 70%;

max-width:800px;

min-width:400px;

height: auto;

overflow:hidden;

margin: 2em auto 2em auto;

border: 10px solid #fff;

position: relative;

-webkit-box-shadow: 1px 1px 2px #222;

-moz-box-shadow: 1px 1px 2px #222;

box-shadow: 0 8px 10px -6px #222;

font-family:"Georgia", "Garamond", "Times New Roman", Times, serif;

}

.bild .infobox {

width: 70%;

height: auto;

position: absolute;

bottom: 0;

left: 0;

margin-left:15%;

border:3px solid #fff;

border-bottom:none;

border-top-right-radius:10px;

border-top-left-radius:10px;

box-shadow:0 0 9px #fff;

background-color: rgba(80,80,80,0.7);

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

-o-transition: all 0.4s ease-in-out;

-ms-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

-webkit-transform: translateY(102%);

-moz-transform: translateY(102%);

-o-transform: translateY(102%);

-ms-transform: translateY(102%);

transform: translateY(102%);

}

.bild:hover .infobox {

-webkit-transform: translateY(0);

-moz-transform: translateY(0);

-o-transform: translateY(0);

-ms-transform: translateY(0);

transform: translateY(0);

}

.bild img {

display: block;

width:100%;

position: relative;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.bild h2 {

font-variant:small-caps;

text-align: center;

position: relative;

font-size: 1.2em;

padding: 0.2em;

margin: 0;

background: rgba(0, 0, 0, 0.5);

color: #F3F3F3;

box-shadow: 0px 1px 3px rgba(255, 255, 255, 0.5);

border-top-right-radius:7px;

border-top-left-radius:7px;

}

.bild p {

font-style: italic;

font-size: 0.8em;

position: relative;

color: #fff;

padding: 0.8em;

margin:0;

}

</style>


Quellcode einfügen:

neuer Artikel > Widget > Quellcode > code einfügen > ok

support
Dutch English French German

<div class="bild">

<img src="http://zella.de/code/bilder/hover1.jpg" alt="">

<div class="infobox">

<h2>Ihr könnt hier per HTML alles einbinden</h2>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

<p style="text-align: center"><a href="http://community.zeta-producer.com/" target="_blank">zum

Zeta-Forum</a>&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp; &nbsp; <a href="http://www.zp-widgets.de/" target="_blank">ZP-Widgets</a></p>

<p><img src="http://zella.de/code/bilder/450x103.jpg" alt=""></p>

</div>

</div>