JSFiddle - React, Tailwind, and code Playground

HTML

<div id="images">
  <span><img src="http://admatravel.com/wp-content/uploads/2011/09/images-150x150.jpg" /></span>
  <span><img src="http://admatravel.com/wp-content/uploads/2011/09/images-150x150.jpg" /></span>
</div>

<hr />

<table id="logo">
  <tr>
    <td class="tile">
      <a href="#">
        <img src="http://admatravel.com/wp-content/uploads/2011/09/images-150x150.jpg" />
        <span class="caption">img1</span>
      </a>
    </td>
    <td class="tile">
      <a href="#">
        <img src="http://admatravel.com/wp-content/uploads/2011/09/images-150x150.jpg" />
        <span class="caption">img2</span>
      </a>
    </td>
  </tr>
</table>

CSS

#images span {
    display: inline-block;
    background-color: black;
   background: #000 url(http://www.orxonox.net/export/7470/data/branches/cleanup/images/overlay/crosshair.png) center no-repeat;
    cursor:pointer;
  }

.tile {
  display: block;
  position: relative;
  overflow: hidden;
}

.caption {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -moz-opacity: 0;
  filter: alpha(opacity=0);
  width: 150px;
  height: 150px;   
}

JavaScript

$(document).ready(function(){
    $(".tile").hover(function(){
      $(this).find('.caption').stop().fadeTo("fast",1);
    },function(){
      $(this).find('.caption').stop().fadeTo("fast",0);
    });
  });