Text über GIF Animation schreiben oder platzieren

[Nuveon]

Liebe Mitglieder:innen,

ich habe das Problem, dass ich meine Divbox (bestehend aus einem h2 und p tag) nicht in meiner GIF Datei einfügen kann bzw. Texte in dem GIF Areal zu schreiben.
Im Anhang habe ich einen Screenshot vom Ergebnis beigefügt, wie es am Ende aussehen soll.

Hat jemand vielleicht eine Idee, wie ich das Ganze sowohl im HTML als auch im CSS darstellen kann?

Bedanke mich schon mal im Voraus für Eure Hilfe.

Viele Grüße
Nuveon

 

[Sempervivum]

Hallo Nuveon und willkommen im Forum!
Du schreibst:

dass ich meine Divbox (bestehend aus einem h2 und p tag) nicht in meiner GIF Datei einfügen kann bzw. Texte in dem GIF Areal zu schreiben.

Ich gehe mal davon aus, dass Du diese Texte nicht wirklich in die Bilddatei einfügen sondern mit HTML und CSS darüber legen willst.
In dem Fall versuche es so:

<div class="gif-wrapper">
    <img src="dein-gif.gif">
    <div class="caption">
        <h2>
            Deine Überschrift
        </h2>
        <p>
            Dein Text
        </p>
    </div>
</div>

div.gif-wrapper {
    display: inline-grid;
}

/* Damit Bild und Text übereinander liegen, platzieren wir
beides in die selbe Zelle des Grid: */
div.gif-wrapper div.caption,
div.gif-wrapper img {
    grid-column: 1/2;
    grid-row: 1/2;
}

Ungetestet, wenn es nicht funktioniert, melde dich wieder.
Mit der Anordnung von Überschrift und Absatz kommst Du möglicher Weise selbst zum Ziel, wenn nicht, melde dich ebenfalls.

 

[Nuveon]

Hallo Sempervivum,

vielen Dank Dir, das probiere ich sehr gerne mal aus.

UPDATE: Hat wunderbar geklappt, besten Dank!

LG Nuveon