Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] colocar etiqueta sobre imagen

Estas en el tema de colocar etiqueta sobre imagen en el foro de CSS en Foros del Web. Saludos estoy intentando colocar un titulo sobre una imagen con el siguiente codigo @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div class = 'picture' > ...
  #1 (permalink)  
Antiguo 24/01/2017, 19:02
 
Fecha de Ingreso: julio-2011
Ubicación: Los Rios
Mensajes: 145
Antigüedad: 12 años, 8 meses
Puntos: 10
colocar etiqueta sobre imagen

Saludos estoy intentando colocar un titulo sobre una imagen con el siguiente codigo
Código HTML:
Ver original
  1. <div class='picture'>
  2.     <img src='./images/museo/20170119202909.jpg' width='100%' />
  3.     <div class='tipo'>Arquelogica</div>
  4. </div>

trabajando con estas clases:
Código CSS:
Ver original
  1. .picture{
  2.     width: 44%;
  3.     border-radius: 10px;
  4.     margin:3%;
  5.     float: left;
  6.     overflow: hidden;
  7. }
  8. .picture img{
  9.     float:left;
  10.     position: relative;
  11. }
  12. .picture .tipo{
  13.     position:fixed;
  14.     float:left;
  15.     left: 41%;
  16.     background-color: rgba(255,0,4,0.6);
  17.     z-index: 100;
  18.     margin-top: 25px;
  19.     height: 35px;
  20.     color: black;
  21.     font-family: 'Nunito', sans-serif;
  22.     padding-top: 5px;
  23.     padding-left: 50px;
  24.     padding-right: 50px;
  25.     transform: rotate(43deg);
  26. }

el problema es que la etiqueta aparece en la esquina como deseo pero los extremos se salen del contenedor principal que es "picture". alguna idea o ayuda.

__________________
___________________________
Si te ayudo mi respuesta dale al +1
  #2 (permalink)  
Antiguo 24/01/2017, 22:26
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: colocar etiqueta sobre imagen

Pareciera funcionar porque no tienes ningún otro código/contenido en tu html, pero si le pones contenido veras que no te funciona en absoluto..

1.- hasta donde recuerdo fixed es relativo a la ventana del navegador en muchos casos es el body
2.- la imagen no tiene relevancia si especificas la posición relativa o no.
3.- en lugar de fixed prueba con absolute
  #3 (permalink)  
Antiguo 25/01/2017, 18:38
 
Fecha de Ingreso: julio-2011
Ubicación: Los Rios
Mensajes: 145
Antigüedad: 12 años, 8 meses
Puntos: 10
Respuesta: colocar etiqueta sobre imagen

Lo tengo con absolute y el resultado es el mismo, no entiendo porque el overflow:hidden no actua como lo espero
__________________
___________________________
Si te ayudo mi respuesta dale al +1
  #4 (permalink)  
Antiguo 27/01/2017, 14:04
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 8 años, 11 meses
Puntos: 4
Respuesta: colocar etiqueta sobre imagen

Hola, creo que es esto lo que buscas http://codepen.io/anon/pen/PWOWew

Etiquetas: overflow
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 07:07.