No puedo poner el texto delante con z-index

[Linton]

Tal vez sea un fallo tonto pero no lo veo

He probado a meter el texto en <span> y en <div>, pero nada: se queda detrás de la bola y sólo se ve porque la opacidad de las bolas está rebajada, menos en la 3ª que tiene el hover.

¿Alguien ve el fallo? ¡Gracias!

Código HTML:

<div class="caja">
        <img class="bola" src="bola.png"/>
        <div class="marca">Texto</div>
        </div>
 
        <div class="caja">
        <img class="bola" src="bola.png"/>
        <div class="marca">Texto</div>
        </div>
 
        <div class="caja">
        <img class="bola" src="bola.png"/>
        <span class="marca">Texto</span>
        </div>
 
        <div class="caja">
        <img class="bola" src="bola.png"/>
        <span class="marca">Texto</span>
</div>
 

Código CSS:

caja {
    margin: 5px;
    float: left;
    width: 140px;
}
 
.bola {
    opacity:0.4;
    z-index:-10;
}
 
.marca {
    font: 24px Helvetica;
    color: red;
    border: 1px solid navy;
    margin: -90px 0 0 40px;
    float: left;
    z-index: 10;
}
 
.bola:hover{
    opacity:1;
}