So erhalten Sie zwei Bilder ohne SVG zu überlappen

Question

Ich habe ein Logo und eine kleine Version des Logos, das die Wörter nicht hat. Ich möchte, dass sich die beiden Bilder überlappen, so dass beim Laden der Seite die große Version ausgeblendet wird und die Achsen an derselben Stelle eingeblendet werden, an der sie in der großen Version waren. Hier ist ein gif, was ich meine

Ich bin nicht sicher, ob es einen besonderen Trick dazu ist aber alles, was ich versucht habe, bewegt eine Sache, die andere bewegt und ich kann sie nicht bekommen sich richtig überlappen ohne es zu verschrauben. Ich möchte, dass das Logo in der Mitte des Bereichs über dem roten Pfeil steht.

Answer 1

Legen Sie beide Bilder in einen Container, der position: relative hat, und geben Sie die Bilder position: absolute. Auf diese Weise werden Sie in der Lage sein, die Bilder übereinander zu positionieren und ihnen genaue Koordinaten top und left zu geben.

html

<div id="logo-container"> 
    <img id="logo1"></img> 
    <img id="logo2"></img> 
</div> 

css

#logo-container { 
    position: relative; 
} 

#logo-container > img { 
    position: absolute; 
} 

#logo1 { 
    top: 0; 
    left: 0; 
} 

#logo2 { 
    top: 200px; // change me 
    left: 130px; // change me 
}