Text über Bild legen

Bild 1   /   Bild 2   /   Bild 3


Bild 1

color_key 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
support
Dutch English French German

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>


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>