Search code examples
htmlcssposition

How to get two images to overlap without SVG

I have a logo and a small version of the logo that doesn't have the words. I want to have the two images overlapping so that when the page loads the large version will fade out and the axes will fade in in the same place that they were in the large version. Here is a gif of what I mean

enter image description here

I'm not sure if there is a special trick to this but everything I've tried, moving one thing moves the other and I can't get them to overlap properly without it screwing up. I want the logo to be in the middle of the area above the red arrow. DEMO

Solution

  • Put both images in a container who has position: relative, and give the images position: absolute. This way you'll be able to position the images on top of each other and give them exact top and left coordinates.

    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
}