Is it possible to overlap exactly half of an image in CSS using another image while maintaining a set height? The width of the images will vary based on their aspect ratios. Can this be achieved with CSS alone or would JavaScript need to be involved?
The following code demonstrates positioning one image over another, but I want to achieve the overlapping effect automatically without manually adjusting positions. Is there a way for CSS to handle this? Or perhaps a JavaScript solution exists? In the code provided, the height should remain the same, and half of any image used should overlap horizontally.
<html>
<head>
<style type="text/css">
#collage-container{
width:300px;
height: 200px;
position: relative;
background:#f22;
}
#collage-one, #collage-two{
height:200px;
position:absolute;
}
#collage-one{
z-index:1;
left:100px;
position:absolute;
}
</style>
</head>
<body>
<div id=collage-container>
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" id=collage-one />
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" id=collage-two />
</div>
</body>
</html>