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;
}
 

[codeams]

La propiedad z-index aplica únicamente a elementos con posición diferente a la estática como son absolute, fixed y relative.
En este caso creo que te convendría ajustar el código de dos maneras:

1) Position relative a la "bola" y listo.
2) Position relative a la "bola" y ubicar el texto dentro de la bola utilizando posición absoluta.
En ambos casos z-index debería funcionar bien.

Saludos (:

[Linton]

¡Gracias! Efectivamente funciona

...pero ahora la bola se ha vuelto inmune al hover ¿Cómo podría solucionarlo?

[pzin]

Si el valor de z-index es negativo entonces todo lo demás quedará por encima.

[Linton]

Pero es que no tiene nada por encima, quiero decir sólo el texto que es mucho más pequeño que la bola, de modo que la bola debería acusar el hover porque nada se interpone, ¿no?

[pzin]

Bueno, prueba a quitarle valor negativo y nos comentas.

[Linton]

Es que entonces no se ve el texto

[pzin]

Es que en realidad, no tienes porqué usar una imagen. Puedes poner un elemento y hacerlo circular y ahí dentro poner el texto:

Código HTML:

<div>texto</div>
 

Código CSS:

div {
  float: left;
  width: 140px;
  height: 140px;
  background: rgba(200,200,200,.4);
  border-radius: 50%; /* la bola */
  line-height: 140px; /* centra el texto verticalmente */
}
 
div:hover {
  background: rgba(200,200,200,1);
}
 

[Linton]

Aaaah... easy peasy lemon squeezy! Muchas gracias, maestro.

[Linton]

Ya he visto cómo funciona la propiedad line-height Ahora para centrar horizontalmente el texto en la bola, ¿cuál sería la mejor forma? Porque añadir padding-left restando del width quizás no sea lo más indicado...

[pzin]

Iniciado por Linton

Ya he visto cómo funciona la propiedad line-height Ahora para centrar horizontalmente el texto en la bola, ¿cuál sería la mejor forma?

Me faltó eso si.

Código CSS:

text-align: center;
 

Auque era obvio eso.

[codeams]

Si te gustó la técnica del line-height pues utiliza with:100% con text-align:center.

Código CSS:

.texto{
  width : 100%;
  text-align : center;
}
 

Woops! Espera.. el width esta de más. ya que la "bola" es ahora solo el background.
Con text-align center te bastará C:

[Linton]

¡A la pared con orejas de burro!