Adición de barras de color a la imagen con CSS

Question

Tengo el código CSS a continuación junto con una imagen para mostrar su salida. Necesito ayuda, aunque 2 cosas.

1. Este código funciona bastante bien para mostrar el nombre de usuario en la foto, sin embargo me di cuenta hoy durante el uso de cromo durante todo el día a menudo cuando me haga clic en un enlace que me llevaría a la página que tiene imágenes con este código, no mostrar el nombre de la imagen, que sería sólo mostrará el nombre debajo de la imagen y el div negro transparente no sería visible en absoluto y el nombre ni siquiera sería en la imagen, que sería luego actualice la página y que funcionaría bien, lo que podría causar esto, esto fue mientras mi PC estaba actuando como si fuera corto de memoria, que podría ser parte del problema?

2. Me gustaría hacer un programa de barra en     la parte superior de la imagen que es la     ancho de la imagen y, como tal     2-3 píxeles de alto y tienen una     color de fondo de azul como. Qué     Estoy queriendo lograr es de     usuarios femail habrá una rosa     bar allá de imagen y una diferente     color para los hombres. ¿Puede alguien que     sabe css me ayude a modificar esto para hacer     que el mejor favor

<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    padding: 5px;
    height: 5px;
    line-height: 4px;
    text-align: center;
    overflow: hidden;
}
div.imageSub div.blackbg {
    z-index: 2;
    background-color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.5;
}
div.imageSub div.label {
    z-index: 3;
    color: white;
}
</style>

<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
    <img src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
    <div class="blackbg"></div>
    <div class="label">Sara</div>
</div>

Answer 1

Desde que he escrito este código para usted, parece lógico que también trato de arreglarlo ...

Parece que Chrome está luchando ya que no conoce la altura del elemento. Vamos a utilizar los márgenes en lugar de posicionamiento

Además, dado que está utilizando una determinada altura, que podría caer posicionamiento todos juntos y utilizar el siguiente CSS (en cuyo caso no debería ser necesario el código anterior):

div.imageSub img { z-index: 1; margin: 0; display: block; }
div.imageSub div {
    position: relative;
    margin: -15px 0 0;
    padding: 5px;
    height: 5px;
    line-height: 4px;
    text-align: center;
    overflow: hidden;
}
div.imageSub div.blackbg {
    z-index: 2;
    background-color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.5;
}
div.imageSub div.label {
    z-index: 3;
    color: white;
}

EDIT: Usted ha pedido una barra de color superior para el género. Se puede utilizar el siguiente código HTML:

<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
    <img class="female" src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
    <div class="blackbg"></div>
    <div class="label">Sara</div>
</div>

Con el siguiente CSS:

div.imageSub img.female { border-top: 10px solid red; }
div.imageSub img.male { border-top: 10px solid blue; }