<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Poner botones encima de una imagen</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
{
// Funcion que se ejecuta al pulsar sobre el boton de añadir
$(".add").click(function(){
$("#clicked").html("Agregar "+$(this).parent().attr("id"));
});
// Funcion que se ejecuta al pulsar sobre el boton de eliminar
$(".remove").click(function(){
$("#clicked").html("Eliminar "+$(this).parent().attr("id"));
});
});
</script>
<style>
.image_wrapper {
position:relative;
width:102px;
float:left;
margin:10px;
}
.image_wrapper .image {
border:1px solid #ccc;
width:100px;
height:100px;
}
/* Definimos el formato de las imagenes */
.image_wrapper .add, .image_wrapper .remove {
position:absolute;
top:0px;
opacity:0;
transition:opacity 0.5s linear;
-webkit-transition:opacity 0.5s linear;
cursor:pointer;
border:0px;
width:32px;
height:32px;
}
/* Mostramos el icono al pasar por encima de la imagen con una transicion */
.image_wrapper:hover .add, .image_wrapper:hover .remove {
transition: opacity 0.5s linear;
-webkit-transition: opacity 0.5s linear;
opacity: 0.8;
}
/* Posicionamos los botones en la posicion izquierda y derecha */
.image_wrapper .add {
left:0px;
}
.image_wrapper .remove {
right:0px;
}
#clicked {clear:both;}
</style>
</head>
<body>
<h1>Ejemplo de poner botones encima de una imagen</h1>
<div class="image_wrapper" id="img1">
<img src="http://www.lawebdelprogramador.com/logolwp100x25.jpg" class="image">
<img src="more24x24.png" title="agregar" class="add">
<img src="less24x24.png" title="eliminar" class="remove">
</div>
<div class="image_wrapper" id="img2">
<img src="http://www.lawebdelprogramador.com/logolwp100x25.jpg" class="image">
<img src="more24x24.png" title="agregar" class="add">
<img src="less24x24.png" title="eliminar" class="remove">
</div>
<div class="image_wrapper" id="img3">
<img src="http://www.lawebdelprogramador.com/logolwp100x25.jpg" class="image">
<img src="more24x24.png" title="agregar" class="add">
<img src="less24x24.png" title="eliminar" class="remove">
</div>
<!-- div que muestra el boton pulsado y sobre que imagen -->
<div id="clicked"></div>
</body>
</html>