title: How can i set a black transperency on hover multiple thumbnail images with each image has a different position?
body: <p>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.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div data-content="Text here" class="image"&gt;
   &lt;div class="img1"&gt;
    &lt;a href="site1.html"&gt;&lt;img src="../img1"&gt;&lt;/a&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-content="Text here" class="image"&gt;
   &lt;div class="img2"&gt;
    &lt;a href="site2.html"&gt;&lt;img src="../img2"&gt;&lt;/a&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS IMG</strong></p>
  
  <pre><code>.img1 {
    height:200px;
    position:relative;
    margin-top:-10%;
  
  }
  .img2 {
    height:200px;
    position:relative;
    left:10%;
  }
  </code></pre>
  
  <p><strong>CSS TRANSPARENCY</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>