No need to bump your thread so soon (see forum rules and guidelines).
Since your desired approach truly does require absolute positioning you won't have the option to get the container div to automatically set itself to the correct height with just HTML and CSS...unless you do something hacky.
Absolute positioning essentially "breaks" the document flow for the element it is applied to. So the parent element no longer knows or "cares" what size the absolute-positioned child is.
The only (extremely hacky) way I can think of to overcome this with pure HTML/CSS is to basically duplicate all of your images inside the div and have the duplicate versions use the default (static) positioning with
visibility:hidden; or
opacity:0;. Doing that, your container div will stretch to fit the tallest image without actually showing the duplicate entries. The user will still only download the image once, but you will be wasting markup and potentially making your page look like it's repeating itself when a search engine crawls your page for content. If you're not so worried about those drawbacks then you can feel free to do the dirty deed.
Otherwise, you will need to
use javascript to read each image's dimensions and apply the largest height value to the parent div. That is much less hacky, but it requires javascript on page load and it might take longer to actually apply the size to the div.
Here is an example of the hack method:
Code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Image Test</title>
<script type="text/javascript">
</script>
<style type="text/css">
*{margin:0;padding:0;}
img{border:0;}
body{padding:10px;font-family:verdana;font-size:12px;}
h1{font-size:20px;font-weight:bold;margin-top:50px;margin-bottom:10px;}
.main_big_wrap{position:relative;width:500px;margin:0px auto;padding:10px;background-color:rgba(0,0,0,0.5);}
.main_big_wrap img{position:absolute;z-index:1;width:300px;top:10px;opacity:0.5;-moz-transition:opacity 0.5s;-webkit-transition:opacity 0.5s;transition:opacity 0.5s;}
.main_big_wrap img:first-child{left:10px;z-index:3;}
.main_big_wrap img:nth-child(2){left:110px;z-index:2;}
.main_big_wrap img:nth-child(3){left:210px;}
.main_big_wrap img:hover{z-index:4;opacity:1;}
.main_big_wrap img.hidden{visibility:hidden;position:static;margin-left:-9999px;}
</style>
</head>
<body>
<h1>Here is an example:</h1>
<div class="main_big_wrap">
<img src="pics/1.jpg" alt="" />
<img src="pics/2.jpg" alt="" />
<img src="pics/3.jpg" alt="" />
<img class="hidden" src="pics/1.jpg" alt="" />
<img class="hidden" src="pics/2.jpg" alt="" />
<img class="hidden" src="pics/3.jpg" alt="" />
</div>
</body>
</html>
And here is an example of the javascript method:
Code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Image Test</title>
<script type="text/javascript">
var set_height = function(){
var target_class = "main_big_wrap";
var target,all_divs,all_images,greatest_height=0;
var go = function(){
all_divs = document.getElementsByTagName('div');
for(i=0;i<all_divs.length;i++){
if(all_divs[i].className){
if(all_divs[i].className===target_class){
target=all_divs[i];
all_images=target.getElementsByTagName('img');
for(j=0;j<all_images.length;j++){
if(all_images[j].height>greatest_height){
greatest_height=all_images[j].height;
}
}
break;
}
}
}
target.style.height=greatest_height+"px";
};
return{
go:go
};
}();
</script>
<style type="text/css">
*{margin:0;padding:0;}
img{border:0;}
body{padding:10px;font-family:verdana;font-size:12px;}
h1{font-size:20px;font-weight:bold;margin-top:50px;margin-bottom:10px;}
.main_big_wrap{position:relative;width:500px;margin:0px auto;padding:10px;background-color:rgba(0,0,0,0.5);}
.main_big_wrap img{position:absolute;z-index:1;width:300px;top:10px;opacity:0.5;-moz-transition:opacity 0.5s;-webkit-transition:opacity 0.5s;transition:opacity 0.5s;}
.main_big_wrap img:first-child{left:10px;z-index:3;}
.main_big_wrap img:nth-child(2){left:110px;z-index:2;}
.main_big_wrap img:nth-child(3){left:210px;}
.main_big_wrap img:hover{z-index:4;opacity:1;}
</style>
</head>
<body>
<h1>Here is an example:</h1>
<div class="main_big_wrap">
<img src="pics/1.jpg" alt="" />
<img src="pics/2.jpg" alt="" />
<img src="pics/3.jpg" alt="" />
</div>
<script type="text/javascript">set_height.go();</script>
</body>
</html>
Before you post, read our: 
