miniatura con el botón de superposición de imagen de eliminación?

Question

Es necesario crear un botón de eliminación que aparecen sobre los pulgares cuando un usuario se ciernen esa imagen con su ratón un enlace aparece como Eliminar de favoritos?

Alguien sabe cómo lograr esto?

Un ejemplo de lo que quiero es botón de la lista de youtube rápida a encontrar a través de los vídeos pulgares.

Answer 1

Esto mostrará el icono cuando se pasa la miniatura, y cuando se pasa el icono en la parte superior de eso, se cambiará a un icono de vuelo estacionario.

.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!

Answer 2

Modificado de respuesta original de Daniel Vassallo:

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 (suponiendo que se genera):

<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.
    });
});

Editar:. Simplificó el código HTML

Answer 3

Puede utilizar el siguiente <div> CSS de estilo para lograr esto en puro 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>

Answer 4

<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();
}