Mostrar etiqueta en imagen

[Bultack]

Necesito hacer un efecto sobre varias imágenes que voy a tener en una página que servirán como enlace para ir a otras secciones. Lo que necesito es que cuando el ratón pase por encima de una de las imágenes se muestre una especie de capa/etiqueta con el nombre de la categoría/sección a la que se quiere ir. El problema que tengo es que las imágenes iniciales, las que se ven nada más entrar en la página ya vienen también con el nombre de la sección/categoría y la etiqueta/capa que debo hacer que aparezca debe aparecer con un fondo negro y el nombre de la sección/categoría pero claro, las letras deben coincidir en posición, tamaño y demás.

El problema que tengo es que no tengo ni idea de como hacer para que cuando pase por encima de esa imagen me aparezca esta etiqueta ni sé cual es la mejor forma para hacerlo. La única forma en la que he pensado y para que las letras coincidan bien para cuando suceda el efecto es copiar la imagen inicial y coger solo la parte de las letras y ponerle el fondo transparente y que solo se vea abajo el rótulo negro con las letras para que cuadre bien. Después hacer que esta segunda imagen aparezca encima de la imagen original pero que quede oculta, pero no me gusta nada como queda el CSS ya que tengo que estar corrigiendo la posición de cada imagen para que quede encima de la imagen inicial y no sé si esto después también me dará problemas con otras resoluciones

[pzin]

Casi te entiendo. No entiendo aquello de que la etiqueta tenga que coincidir en tamaño y demás con otra cosa. ¿Qué cosa?

Para mostrar u ocultar un elemento al pasar el ratón por otro, no habría que hacer sino algo parecido a esto:

Código CSS:

.etiqueta {
  display: none;
}
div#algo:hover .etiqueta {
  display: block;
}
 

Luego para colocarlo donde quieras, normalmente para estas cosas se indica a div#algo que tenga posición relative y el elemento .etiqueta una posición absoluta dentro de div#algo.

[Bultack]

A lo que tenga que coincidir la etiqueta a mostrar es porque la imagen original, la que aparece inicialmente también incluye la etiqueta con el nombre de la sección, si el nombre aparece centrada horizontal y verticalmente no puedo hacer que la etiqueta que quiero que se muestre al pasar el ratón por encima esté alineada a la derecha, a eso me refiero.

Voy a probar con lo que me has comentado y demás a ver qué tal funciona.

EDITO: Lo he probado pero no entiendo mucho lo último que me indicas, lo de las posiciones relative y absolute. Dejo el código del HTML y CSS.

Código:

		<div id="content">
			<div id="image">
				<a href="#"><img src="soluciones_0.png" alt="servicios" /></a>
				<div id="layer-1" class="layer"><img src="soluciones_1.png" alt="servicios" /></div>
			</div>
		</div>

Código:

#content {
	position:absolute;
	top:50%;
	left:50%;
	width:620px;
	height:500px;
	margin-left:-310px;
	margin-top:-250px;
	border:2px solid red;
}

#image {
	position:relative;
	border:2px solid yellow;
	width:179px;
	height:252px;
}

.layer {
	position:absolute;
	border:2px solid blue;
}

Los bordes solo están puestos para usarlos como guía.