Bild 1
Gästezimmer Typ1
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>
body {
font: 110% sans-serif;
}
.bild_beschriftung {
position: relative;
}
.bild_beschriftung img {
display: block;
}
.bild_beschriftung span {
position: absolute;
bottom: 0;
left: 0;
width: 400px;
color: #fff;
text-align: center;
height: 2.5em;
line-height: 2.5em;
border-top: 1px solid #ababab;
background: #404040; /* Fallback IE 6-8 */
background-color: rgba(40, 40, 40, 0.6);
}
</style>
Quellcode einfügen:
neuer Artikel > Widget > Quellcode > code einfügen > ok
<div class="bild_beschriftung">
<img
src="http://www.zella.de/media/images/typ4-large.jpg"
alt="color_key" width="400" height="267" />
<span>Gästezimmer Typ1</span>
</div>
Bild 2
|
Lorem ipsum dolor
|
Quellcode einfügen:
neuer Artikel > Widget > Quellcode > code einfügen > ok
<table cellPadding="0" cellSpacing="0">
<tr>
<td style="background-image:
url(http://zella.de/bilder/500x300-3.jpg); width: 500px; height:
300px;">
<div style="font-family: 'Comic Sans MS', 'Times New
Roman';
font-size: 24px; font-weight: bold; color: #990000;
text-align: center; width: 100%;
height: 45px; background-color: #FFFFFF; opacity:
0.7;">
Lorem ipsum dolor
</div>
</td>
</tr>
</table>
Bild 3
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>
div#bild {
position: relative;
width: 500px;
height: 300px;
}
div#bild a {
display: block;
}
div#bild a:hover {
}
div#bild a span {
display: none;
}
div#bild a:hover span {
display: block;
text-decoration: bold;
font-size: 24px;
text-align: center;
position: absolute;
top: 0px;
left: 0;
width: 420px;
padding: 10px;
margin: 29px;
z-index: 100;
color: white;
background: black;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
}
</style>
Quellcode einfügen:
neuer Artikel > Widget > Quellcode > code einfügen > ok
<div id="bild"><a href="#"><img
src="http://zella.de/bilder/500x300-2.jpg" alt="bild" title="bild"
width="500" height="300" /><br /><span>Lorem ipsum
dolor</span></a></div>