SVGなしで2つの画像を重ねる方法

Question

私はロゴとそのロゴのない小さなバージョンを持っています。 2つの画像が重なり合うようにして、ページが読み込まれると大きなバージョンがフェードアウトし、軸が大きなバージョンの同じ場所でフェードインするようにします。ここで私はこれまで特別なトリックがあるかどうかはわからないが、私が試したすべてのもの、一つのことを移動すると、他に移動し、私はそれらを得ることができない私は

何を意味するかの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 
}