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.