Clever Geek Handbook

Overlay 2 images

I am using JS to write HTML code where I need to display 2 images that are completely overlapped.

The height and width of both are the same. What CSS properties can I use for this?

+3


source to share


4 answers


Play with css in this:

http://jsfiddle.net/zuZxD/



I used opacity to display the overlap.

+4


source


Position relative to container and absolute in images:

All of the above answers are missing the fact that you need to place the parent with something other than static, or else you place them in an absolute browser window, which I suppose you don't want to do.

position: absolute

will give your position in the container of the nearest parent with some positioning. Thus, we give the parent position:relative;

without a top or bottom declaration, so it will be 0px off where it would normally be (i.e. no change but still has it position

declared).



<div id="container">
    <img src="data:image/png;base64,R0lGODlhAQABAPAAAC+byy+byywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
    <img class="hide" src="data:image/png;base64,R0lGODlhAQABAPAAADCQIzCQIywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
</div>

#container{
    position:relative;
}
#container img{
    position:absolute;
    top:0;
    left:0;
}
.hide:hover{
    opacity:0;   
}​

http://jsfiddle.net/BLbhJ/1/

Edit: Added your hidden functionality

+7


source 


<style>
.imageoverlap{

position: absolute;
top:100px;

}
</style>
...
<div class='imageoverlap'>
image1
</div>
<div class='imageoverlap'>
image2
</div>

Try this: D

+1


source


If you set an absolute position, you can control where you want to place it.

<style>
    #overlay{position:absolute; top:0px;}
</style>

<div id="layer1"><img src="img1.png"></div>
<div id="overlay"><img src="overlay_image.png"></div>

Now you need to place the #overlay where you want by setting the top and left positions, i.e. top: 0px, left: 300px;

0


source






More articles:


All Articles