Multiple Image Overlay

Question

I have three images that I want to overlay (with HTML + CSS, I don't want to use javascript if possible):

This is the result that I would like to achieve:
[Image4]

Here is what I 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="http://i.stack.imgur.com/Es4OT.png"/> <img id="image2" src="http://i.stack.imgur.com/WQSuc.png"/> <img id="image3" src="http://i.stack.imgur.com/Xebnp.png"/> </div>​ 

image1 : the "main" image ( image1 should set the maximum height and maximum width for the image. The container is above the HTML above) [blue frame]
image2 : horizontal-align: center; and top: 0; relatively image1 [pink frame]
image3 : resized to 10% of its original size, horizontal-align: center; relative to image1 [green border]

My predilection for HTML + CSS errors led to the following:

I can't figure out how my CSS should be. What should I do to achieve the result, for example [image4]?

Answer 1

You can do this with one div and a large background, for example:

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

This was an easier way to display it. Of course, in the place where I posted the positioning values, you have to add your own.

UPDATE

In the case that you say after, I think you can use 3 absolute positional divs with a background and manipulate them using the css3 transform attribute. This gives you the ability to rotate, scale, and more using your elements. And you can also manipulate it with javascript.

Additional Info About css3 transform

Answer 2

make transparent images

UPDATED TO CONTINUE code related to the forwarding problem UPDATED code for IMAGE ROTATION I applied image rotation for protractor image (image2) I 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>