Bild über Bild

[UnoDosTres]

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]

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]

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]

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]

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