Peleando con un efecto para incluir un menu sobre una imagen al posicionarme encima

cvander · #1 (**permalink**) 27/05/2011, 18:38

Estuve intentando entender la magia negra detrás de un código CSS que permite que al pasar sobre una imagen aparezcan unos botones (para editar, votar en ella, etc.).

El gran problema es que todo esté generado sobre una caja absoluta que le fija un ancho y alto a la imagen. Pero cuando quiero dejarlo libre para que funcione con cualquier imagen, todo se rompe.. Intenté eliminar el absoluto, usar relativos, posicionar la caja encima.. En fin, que estoy un poco perdido. Tal vez alguien puede ayudar.

El código es este.

Código CSS:

Ver original.trumbl-photo-large { width:566px; overflow: hidden; position: relative;  }
.trumbl-photo-large img { position: absolute;  top: 0;  left: 0;  border: 0; width:566px; }         
.trumbl-photo-large .boxcaption { padding: 10px; text-align: right;}
.trumbl-photo-large .boxcaption h4, 
.trumbl-photo-large .boxcaption p {  height: 29px;  opacity: .8;    /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; color: #fff;}   
.trumbl-photo-large .boxcaption h4 { color: #B5D000; font-size:11px;  background: url(../img/bg-tool-foto.png) right no-repeat !important; text-align: right; padding-top: 31px;  padding-right:20px;}  
.trumbl-photo-large .boxcaption p { margin-top: 300px; text-align: left; padding:5px 0 0 9px; background: url(../img/bg-tool-foto.png) no-repeat; }

Tengo el problema con el width fijo y con el margin-top de 300px. Basicamente esos elementos delimitan el tamaño de la imagen y necesito que sea libre para cualquier imagen.

El sitio en cuestión en vivo donde pueden ver donde se usa el código es este:
http://cookfoodie.com/at-the-japanes...ate-park-Ax6RX

De momento dejé deshabilitado el CSS que incluye el boxcaption porque no está funcionando.

abimaelrc · #2 (**permalink**) 28/05/2011, 21:39

¿Algo así?

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
*{ margin: 0; padding: 0; }
#content-img{
    position: relative;
    width: 566px;
    height: 424px;
}
#content-img:hover .edit{
    background: transparent url(http://www.patentauction.com/images/edit.png) no-repeat center;
    width: 32px;
    height: 32px;
    position: absolute;
    right: 15px;
    bottom: 15px;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="content-img">
        <img src="http://cookfoodie.com/storage/2011/5/19/Ax6RX_medium.JPG" />
        <a href="#" class="edit" title="editar"></a>
    </div>
</div>
</body>
</html>

cvander · #3 (**permalink**) 31/05/2011, 19:52

La verdad que estuve tanto tiempo tratando de resolver el código anterior que no me puse a reconstruirlo de nuevo. Gracias por ayudarme a abrir los ojos ;)

Voy a jugar con tu código y ver como reacciona a fotos de diferentes tamaños.