Dynamic image size gallery with hover overlay using Bootstrap 3 - css

Question

I'm trying to do a nice image hover overlay for a dynamic image gallery using Bootstrap 3:
<div class="section">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="#">
<span class="overlay zoom"></span><img class="img-responsive img-home-portfolio" src="http://upload.wikimedia.org/wikipedia/commons/4/45/World_Wind_Globe_NASA_Timbuktu_1.jpg">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="#">
<span class="overlay zoom"></span><img class="img-responsive img-home-portfolio" src="http://upload.wikimedia.org/wikipedia/commons/4/45/World_Wind_Globe_NASA_Timbuktu_1.jpg">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="#">
<span class="overlay zoom"></span><img class="img-responsive img-home-portfolio" src="http://upload.wikimedia.org/wikipedia/commons/4/45/World_Wind_Globe_NASA_Timbuktu_1.jpg">
</a>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.section -->
For the overlay hover effect, I'm using this CSS:
a .overlay {
opacity: 0;
filter: alpha(opacity=0);
z-index: 0; /* for Opera */
}
a:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
z-index: 1; /* for Opera */
}
.overlay {
display: block;
background-color: rgba(0,0,0,0.3);
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.overlay.zoom {
background-image: url(http://www.open-service.org/img/zoom.png);
}
My problem is that the overlay extends to the div size and not just to the size of the image.
To illustate this i have created this jsfiddle: http://jsfiddle.net/5AR2H/6/
Thanks.