Wie kann man ein Bild über einem Text schweben lassen (HTML)?

Ich mache gerade eine Website und hätte die Frage wie man ein Bild vor einem Text schweben lassen kann also dass es im Vordergrnd ist. Und falls das möglich wäre beim Draufklicken eine Animation bei dem das Bild verschwindet! Danke!

Answer 1

[threadi]

Dafür gibt es viele Möglichkeiten. Eine wäre, wenn Du per CSS das Bild absolut über dem Text positionierst. Per JavaScript müsstest Du dann einen Klick darauf abfangen und dann die CSS-Eigenschaften so beeinflussen, dass das Bild ausgeblendet wird.

Für ersteres findest Du hier einige Hinweise die Du auf deinen Quellcode hin adaptieren musst: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position#position:_absolute

Für letzteres würde ich empfehlen jQuery zu verwenden.

Mit reinem HTML ist das was Du willst nicht möglich da es zum Einen um Gestaltung, zum Anderen auch um Interaktion geht.

Woher ich das weiß: Berufserfahrung – mit dem Internet verbunden seit 1993

Comments

[abbrechen]

$('Klasse / ID vom Closebutton').click( function () {
$('Klasse / ID vom Fenster').hide();
});

Oder mit reinem JavaScript

var close = document.getElementById('closebutton');
var popup = document.getElementById('popup');

close.addEventListener('click', function () {
popup.style.display = "none";
});

[TribleF]

Danke für die schnelle Antwort. Das mit dem Bild hab ich jetzt geschafft. Das mit dem ausblenden hab ich mir auch gedacht, also dass ich jQuery brauche.