How can i set a black transperency on hover multiple thumbnail images with each image has a different position?

Question

I'm trying to set multiple black transparency images on hover multiple thumbnail images and each image has a different position. To ensure this, each image has his own class (img1, img2, img3...) with different margins defined.

HTML

<div data-content="Text here" class="image">
 <div class="img1">
  <a href="site1.html"><img src="../img1"></a>
 </div>
</div>
<div data-content="Text here" class="image">
 <div class="img2">
  <a href="site2.html"><img src="../img2"></a>
 </div>
</div>

CSS IMG

.img1 {
  height:200px;
  position:relative;
  margin-top:-10%;

}
.img2 {
  height:200px;
  position:relative;
  left:10%;
}

CSS TRANSPARENCY

.image {
    position:relative;
    width:200px;
    height:200px;
}
.image img {
    width:100%;
    vertical-align:top;
}
.image:after {
    content: attr(data-content);
    color:#fff;
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:1;
}

Answer 1

I think you may have too many wrappers but here is one way with a slightly simpler structure

JSfiddle

HTML

<div class="thumbnail" data-content="Text here">
    <a href="site1.html"><img src="http://lorempixel.com/output/people-q-c-200-200-5.jpg"/></a>
</div>

<div class="thumbnail" data-content="Text here">
    <a href="site2.html"><img src="http://lorempixel.com/output/transport-q-c-200-200-6.jpg"/></a>
</div>>

CSS

.thumbnail {
    display: inline-block;
    position: relative;
}

.thumbnail a,
.thumbnail a img {
    display: block;
}

.thumbnail:after {
    content: attr(data-content);
    color:transparent;
    position:absolute;
    width:100%; height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.0);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.thumbnail:hover:after {
    background:rgba(0,0,0,0.6);
    color:#fff;
}