Display transparent image over Image using CSS

Here is the code where you will get image over another image,
HTML:
<table class="travel_map_prefer">
 <tr> <td class="images"><img src="image1.jpg"  height="150" width="300"/>
     <div class="music-detail" >
      <a href="javascript:void(0);" class="show_prefer" >Prefer this</a>
      </div>
     <span style="float:right;">Mission Bay Beach&nbsp; </span></td>
</tr>
</table>
CSS:
.travel_map_prefer  td.images:hover { background:url(play.png);  }
.travel_map_prefer td.images {
float: left;
width: 312px;
position: relative;
}
.travel_map_prefer .music-detail {
background: #000;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 5px;
left: 5px;
height: 150px;
width: 300px;
color: #989DA2;
display: none;
z-index: 10;
}

.travel_map_prefer  td.images:hover .music-detail {
transition: width 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
display: block;
}

.show_prefer {
height: 150px;
width: 300px;
background: url(play.png) no-repeat center;
position: absolute;
top:  0%;
left: 0%;
overflow: hidden;
text-indent: -999px;
}