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.
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
<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> /
<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>