CSS: Inline divs

HTML

<div class="container">
    <div class="image-wrapper">
        <div class="tweetty">
            <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
        </div>
        <div class="image-vest">Tweetty-one</div>
    </div>
    <div class="image-wrapper">
        <div class="tweetty" style="left: 100px;">
            <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
        </div>
        <div class="image-vest">Tweetty-two</div>
    </div>
    <div class="image-wrapper">
        <div class="tweetty">
            <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
        </div>
        <div class="image-vest">Tweetty-three</div>
    </div>
</div>

CSS

.container {
/*    position:relative;*/
}
.image-wrapper {
    position: relative;
    display: block;
}
.tweetty {
/*    position:absolute;
    overflow:auto;
    top:0;
    left:0;*/
}
.image-vest {
    position:relative;
    top:-300px;
    left:0;
    margin-bottom: -300px;
    background-color:#00f;
    width:220px;
    height:300px;
    opacity:0.4;
    color:#fff;
}