Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Peleando con un efecto para incluir un menu sobre una imagen al posicionarme encima en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/05/2011, 18:38
Avatar de cvander
Moderador
 
Fecha de Ingreso: abril-2001
Ubicación: Ciudadano del mundo
Mensajes: 13.631
Antigüedad: 16 años, 4 meses
Puntos: 1786
Peleando con un efecto para incluir un menu sobre una imagen al posicionarme encima

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
  1. .trumbl-photo-large { width:566px; overflow: hidden; position: relative;  }
  2. .trumbl-photo-large img { position: absolute;  top: 0;  left: 0;  border: 0; width:566px; }        
  3. .trumbl-photo-large .boxcaption { padding: 10px; text-align: right;}
  4. .trumbl-photo-large .boxcaption h4,
  5. .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;}  
  6. .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;}  
  7. .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.
__________________
- Christian Van Der Henst
Platzi
  #2 (permalink)  
Antiguo 28/05/2011, 21:39
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 3 meses
Puntos: 1512
Respuesta: Peleando con un efecto para incluir un menu sobre una imagen al posicionar

¿Algo así?
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. *{ margin: 0; padding: 0; }
  3. #content-img{
  4.     position: relative;
  5.     width: 566px;
  6.     height: 424px;
  7. }
  8. #content-img:hover .edit{
  9.     background: transparent url(http://www.patentauction.com/images/edit.png) no-repeat center;
  10.     width: 32px;
  11.     height: 32px;
  12.     position: absolute;
  13.     right: 15px;
  14.     bottom: 15px;
  15. }
  16. </head>
  17. <div id="wrap">
  18.     <div id="content-img">
  19.         <img src="http://cookfoodie.com/storage/2011/5/19/Ax6RX_medium.JPG" />
  20.         <a href="#" class="edit" title="editar"></a>
  21.     </div>
  22. </div>
  23. </body>
  24. </html>
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 31/05/2011, 19:52
Avatar de cvander
Moderador
 
Fecha de Ingreso: abril-2001
Ubicación: Ciudadano del mundo
Mensajes: 13.631
Antigüedad: 16 años, 4 meses
Puntos: 1786
Respuesta: Peleando con un efecto para incluir un menu sobre una imagen al posicionar

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.
__________________
- Christian Van Der Henst
Platzi

Etiquetas: efecto, encima, incluir
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:14.