html - Overlay several images -

I have three images that I want to overlay (with HTML + CSS, I not If you want to use Javascript if possible):

< Img src = "https: // I.stack.imgur.com/WQSuc.png" alt = "image2">

This is the result that I want to get: < Br> [image4]

This is what I have tried:

CSS:

  .imageContainer {status: relative; } # Image1 {Status: Completed; Top: 0; Z-index: 10; Border: 1px solid blue; } # Image2 {Status: Completed; Top: 0; Z-index: 100; Border: 1 px solid flame; } # Image3 {Status: Absolute; Top: 0; Z-index: 1000; Width: 10%; Height: 10%; Border: 1 px solid green; }   
 HTML:  
  & lt; Div class = "imageContainer" & gt; & Lt; Img id = "image1" src = "http://i.stack.imgur.com/Es4OT.png" /> & Lt; Img id = "image2" src = "http://i.stack.imgur.com/WQSuc.png" /> & Lt; Img id = "image3" src = "http://i.stack.imgur.com/Xebnp.png" /> & Lt; / Div & gt; Line   
  image1 : "main" image  (image1 should set maximum height and maximum width for an image - HTML above)  [Blue border] 
  image2 :  horizontal-align: center;  and  Top: 0;  relative to image 1 [pink border] 
  image 3 : its original size,  horizontal-align: center  related to image in size by 10% 1 [Green border] 
  
 My error HTML + CSS pronounced as:   
 I can not figure out how my CSS should be supposed to get me the results like [image4]?   
 
 
 You can create it with a div, for example more background:  
  #someDiv {background: url ('topImage.jpg') center, url ('imageInTheMiddle.jpg') 0px 0px, url ('bottomImage.jpg') / * some status * /; }   
 This simple way of displaying it was definitely, where I put the positioning value, you have to add one of your.  
  UPDATE   
 In the case you say, I think you can use 3 full position divisions with your status and give them CSS 3 Manipulate with  transform  attribute. It gives the possibility of roaming, scale and more with your elements. And you can manipulate it with javascript too.