No puedo poner el texto delante con z-index

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