Overlay thumbnail with remove image button?

I need to create a remove button that appear over my thu开发者_如何学Gombs when a user hover that image with his mouse a link appear like remove from favorites?

Anyone know how to achieve this ?

An example of what I want is youtube quick list button you find over the videos thumbs.

This will show the icon when you hover the thumbnail, and when you hover the icon on top of that, it will change to a hover icon.

.image-thumb, .image-thumb img {
  position:relative;
  width:60px;
  height:50px;
}
.image-fav {
  display:none;
  position:absolute;
  bottom:0;
  left:0;
  width:15px;
  height:15px;
  background-image:url(normal_plus.png);
}
.image-thumb:hover .image-fav {
  display:block;
}
.image-fav:hover {
  background-image:url(hover_plus.png);
}

<div class="image-thumb">
  <img src="thumb.jpg" />
  <a href="#" class="image-fav"></a>
</div>

Booya!

Modified from Daniel Vassallo's original answer:

CSS:

.image-thumb { 
    position: relative; 
    width: 100px;
    height: 100px; 
    /* apply background-image url inline on the element since it is part of the content */
    background: transparent url() no-repeat center center;
}

.image-thumb a { 
    display: none;
    position: absolute; 
    top: 80px;  /* position in bottom right corner, assuming image is 16x16 */
    left: 84px; 
    width: 16px; 
    height: 16px; 
    background: transparent url(remove_button.gif) no-repeat 0 0;
}   

.image-thumb:hover a { 
    display: block;
}

HTML (presuming that it is generated):

<div class="image-thumb" id="some-unique-thumb-id-1" style="background-image: url(some/image-1.ext)">
    <a href="#"></a>
</div>
<div class="image-thumb" id="some-unique-thumb-id-2" style="background-image: url(some/image-2.ext)">
    <a href="#"></a>
</div>
....
<div class="image-thumb" id="some-unique-thumb-id-n" style="background-image: url(some/image-n.ext)">
    <a href="#"></a>
</div>

JavaScript:

$(function() {
    $(".image-thumb a").click(function(e) {
        e.preventDefault();
        var imageId = $(this).parent().attr("id");
        // remove image based on ID.
    });
});

Edit: simplified the HTML.

You can use the following CSS-styled <div> to achieve this in pure CSS:

CSS:

.image-thumb { 
    position: relative; 

    width:  100px;
    height: 100px; 

    background-image: url(image_thumb.jpg); 
}

.image-fav { 
    position: absolute; 

    top:    0px; 
    left:   0px; 
    width:  20px;
    height: 20px;

    background-image: url(fav_icon.png); 
    background-position: bottom left; 

    display: none;
}   

.image-fav:hover {
    display: block;
}

HTML:

<div class="image-thumb">
    <a class="image-fav" href="javascript:removeFromFav();"></a>
</div>

<div id = "thumbImg">
     <img src="thumb.png" onMouseOver="overlayRemove();" 
       onMouseOut="hideRemove();" />
     <img id='removeImg' src='remove.png' 
     style='position:relative;left:0px;top:0px;z-index:2;display:none' />
</div>

javaScript:

function overlayPic(){
   $('removeImg').show();
}
function hideRemove(){
   $('removeImg').fadeOut();
}