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.