# Bild über Bild



## UnoDosTres (13. November 2009)

Hallo,

ich habe ein kleines Vorschaubild zu einem Video.
Ich möchte gerne das ein Play-Button mittels CSS das darunterliegende Bild
überlagert. (Quasi wie ein Wasserzeichen)
Aber wie bekomme ich das hin? 
Kann mir da jemand einen Tipp geben?


----------



## Maik (13. November 2009)

Hi,

das Übereinanderlegen zweier Bilder funktioniert beispielsweise so:

```
<span class="wrapper">
    <img src="bild1.png" class="img1" alt="" />
    <img src="bild2.png" class="img2" alt="" />
</span>
```


```
span.wrapper {
position:relative;
display:block;
}
span.wrapper img.img1 {
display:block;
}
span.wrapper img.img2 {
position:absolute;
top:0;
left:0;
}
```

mfg Maik


----------



## awortmeier (13. November 2009)

Hi,
du könntest mit Hilfe des Befehls

```
position: absolute/relative;
opacity: 0.5;

1 = 100%
...
0.5 = 50%
...
0 = 0%
```
Den Play Button transparent machen (zu 50%). Dann hat es einen "Wasserzeichen Effekt".


----------



## UnoDosTres (13. November 2009)

Wie kann ich denn die Position vom img2 ändern?
Wenn ich bei top z.B. 5 eingebe dann ist es nicht mehr sichtbar und bei left kann ich Mondwerte eingeben und es passiert nichts. Sprich der Pfeil (PfeilButton) bleibt an der selben stelle. Er klebt jetzt oben rechts in der Ecke. Will in aber unten Links mit ein wenig Pufferzone.


----------



## Maik (13. November 2009)

Mit meinem obigen CSS-Code lässt sich problemlos innerhalb des relativ positionierten <span>-Elements eine Positionsänderung für *img2* vornehmen:

```
span.wrapper img.img2 {
position:absolute;
bottom:10px; /* frei gewählte Startposition von unten */
left:10px; /* frei gewählte Startposition von links  */
}
```

mfg Maik


----------

