Overlay several images

Question

I have three images which I want to overlay (with HTML + CSS, I do not want to use javascript if possible):

This is the result which I would like to achieve:
[image4]

This is what I have tried:

CSS:

.imageContainer {
    position: relative;
}

#image1 {
    position: absolute;
    top: 0;
    z-index: 10;

    border: 1px solid blue; 
}
#image2 {
    position: absolute;
    top: 0;
    z-index: 100;

    border: 1px solid fuchsia; 
}
#image3 {
    position: absolute;
    top: 0;
    z-index: 1000;

    width: 10%;
    height: 10%;

    border: 1px solid green; 
}

HTML:

<div class="imageContainer">
    <img id="image1" src="https://i.sstatic.net/Es4OT.png"/>
    <img id="image2" src="https://i.sstatic.net/WQSuc.png"/>
    <img id="image3" src="https://i.sstatic.net/Xebnp.png"/>
</div>​

image1: "main" image (image1 should set max height and max width for an imageContainer - se HTML above) [blue border]
image2: horizontal-align: center; and top: 0; relative to image1 [pink border]
image3: resized by 10% from its' origin size, horizontal-align: center; relative to image1 [green border]

My error prone HTML + CSS resulted in this:

I can't figure out how my CSS should be. What should I do to achieve a result like [image4]?

Answer 1

You can make it with one div and more background for example:

#someDiv 
{
  background: url('topImage.jpg') center,
            url('imageInTheMiddle.jpg') 0px 0px,
            url('bottomImage.jpg') /*some position*/;
}

It was the easier way to display it. Of course in place where I placed positioning values you must add yours one.

UPDATE

In the case which you say after, I think you can use 3 absolute positioning divs with your backgrounds and manipulate them with css3 transform attribute. It gives you possibility to rotate, scale and much more with your elements. And you can also manipulate it with javascript.

More info about css3 transform

Answer 2

make the images transparent

UPDATED the code AGAIN for transperancy issue UPDATED code for IMAGE ROTATION I have applied image rotation for protractor image(image2) hope that helps you

<style type="text/css">
    .imageContainer {
        position: relative;
        width:165px;
        height:169px;
    }

    #image1 {
        position: absolute;
        top: 0;
        z-index: 10;
        width:120px;
        height:120px;
        border: 1px solid blue; 
    }
    #image2 {
        position: absolute;
        top: 0;
        z-index: 20;
        border: 1px solid fuchsia;
        opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */


    /*for adding image rotation */
       -webkit-transform: rotate(90deg); /*//For chrome and safari*/
        -moz-transform: rotate(90deg);  /*//For ff*/
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /*// For ie */
    /* End for adding image rotation */



    }
    #image3 {
        position: absolute;
        top: 0;
        z-index: 30;
        width: 40%;
        height: 40%;
        border: 1px solid green; 
        left:70px;
        opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */


    }

    </style>






    <form name="frmabc"  action="" method="post">
<div class="imageContainer">
    <img id="image1" src="Es4OT.png"/>
    <img id="image2" src="WQSuc.png" />
    <img id="image3" src="Xebnp.png" />
</div>
</form>