CODEWITHSUNDEEP
htmlcss
code4fun
code4fun

Reputation: 2739

make 2 images overlap

I am using JS to write HTML code where I need to display 2 images exactly overlapped.

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

Upvotes: 4

Views: 22658

Answers (4)

Chris Sobolewski
Chris Sobolewski

Reputation: 12925

Position relative on the container, and absolute on the images:

All of the above answers are missing the fact that you need to position a parent element with something other than static, or else you will be positioning them absolute to the browser window, which I presume you do not wish to do.

position: absolute will give your position in the container of the closest parent with some sort of positioning. So we give the parent position:relative; without declaring top or bottom, this way it will be 0px off from where it would normally be (i.e. no change, but still has 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 hide functionality

Upvotes: 7

Vlad
Vlad

Reputation: 721

If you set position to absolute, 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 position #overlay where you want it, by setting top and left positions, i.e., top:0px, left:300px;

Upvotes: 0

maximumcallstack
maximumcallstack

Reputation: 2917

Play around with the css in this:

http://jsfiddle.net/zuZxD/

I used opacity to display the overlapping.

Upvotes: 6

craighandley
craighandley

Reputation: 156

<style>
.imageoverlap{

position: absolute;
top:100px;

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

Try that :D

Upvotes: 1

Related Questions