Как получить два изображения для перекрытия без SVG

Question

У меня есть логотип и небольшая версия логотипа, в котором нет слов. Я хочу, чтобы два изображения перекрывались, чтобы при загрузке страницы большая версия исчезла, а оси исчезнут в том же месте, что и в большой версии. Вот GIF, что я имею в виду

Я не уверен, если есть специальный трюк для этого, но все, что я пытался, перемещаясь одна вещь движется другой, и я не могу их получить правильно перекрывать, не закручивая. Я хочу, чтобы логотип находился посередине области над красной стрелкой. DEMO

Answer 1

Положите оба изображения в контейнере, который имеет position: relative, и дают изображения position: absolute. Таким образом, вы сможете позиционировать изображения друг над другом и дать им точные координаты top и left.

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 
}