[SOLUCIONADO] colocar etiqueta sobre imagen

[juancaalbarracin]

Saludos estoy intentando colocar un titulo sobre una imagen con el siguiente codigo

Código HTML:

<div class='picture'>
    <img src='./images/museo/20170119202909.jpg' width='100%' />
    <div class='tipo'>Arquelogica</div>
</div>
 

trabajando con estas clases:

Código CSS:

.picture{
    width: 44%;
    border-radius: 10px;
    margin:3%;
    float: left;
    overflow: hidden;
}
.picture img{
    float:left;
    position: relative;
}
.picture .tipo{
    position:fixed;
    float:left;
    left: 41%;
    background-color: rgba(255,0,4,0.6);
    z-index: 100;
    margin-top: 25px;
    height: 35px;
    color: black;
    font-family: 'Nunito', sans-serif;
    padding-top: 5px;
    padding-left: 50px;
    padding-right: 50px;
    transform: rotate(43deg);
}
 

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.

[ArturoGallegos]

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

[juancaalbarracin]

Lo tengo con absolute y el resultado es el mismo, no entiendo porque el overflow:hidden no actua como lo espero

[jorgecanto]

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