CSS - problemas con capas, visualizar el contenido de varias capas

buenas, primero les muestro un esquema de lo que estoy haciendo:

normalmente se presentan 3 imágenes:
_________ __________ ________
| imagen 1 | | imagen 2 | |imagen 3 |
| normal | | normal | |normal |
----------------- ------------------ ----------------
cuando se coloca el mouse sobre ellos, se cambia la imagen y se agrega un texto de la siguiente forma:

_________ ..... __________. ._________
|imagen 1..|......|imagen 2. ..|. .|imagen 3. .|
|hover.........|.......| normal.... .|. .|normal. ... .|
----------------- ------------------ ----------------
_______________________________
| texto 1 |
-------------------------------------------------------

_________ __________ ________
| imagen 1 | | imagen 2 | |imagen 3 |
| normal | | hover | |normal |
----------------- ------------------ ----------------
_______________________________
| texto 2 |
-------------------------------------------------------

_________ __________ ________
| imagen 1 | | imagen 2 | |imagen 3 |
| normal | | normal | |hover |
----------------- ------------------ ----------------
_______________________________
| texto 3 |
-------------------------------------------------------

he realizado varias intentos y buscado por internet ese efecto con html y css, lo he logrado a medias, ejemplo: que al colocar el hover sobre aparece la imagen como es, pero me tapa las otras imágenes normales (coloque la imagen hover mas el texto en una sola imagen .jpg). Las imágenes normales tienen un tamaño definido, pero el hover me agrega el texto. pude colocando un z-index mas bajo de lo normal a la imagen hover, pero hace un efecto de tiliteo entre imagen normal e imagen hover (algo que después de pensar le conseguí sentido).
pense en colocar un span como sigue, pero no me funciono tampoco :( la imagen con tiliteo es la siguiente:

HTML:
<div class="iconosBanderas">
<div class="espaciado5px"><a href="#" class="iconosBandera4 posicionIconosBanderas"></a></div>
<div class="espaciado5px"><a href="#" class="iconosBandera3 posicionIconosBanderas"></a></div>
<div class="espaciado5px"><a href="#" class="iconosBandera2 posicionIconosBanderas"></a></div>
<div class="espaciado5px"><a href="#" class="iconosBandera1 posicionIconosBanderas"></a></div>
</div>

CSS:

.iconosBandera1 {
background: url("imagenes/iconoBanderas.jpg") no-repeat scroll -209px 0px transparent;
position: relative;
}

.iconosBandera1:hover {
background: url("imagenes/iconoBanderas.jpg") no-repeat scroll -4px -28px transparent;
height: 65px !important;
left: 56px;
position: relative;
top: 1px;
width: 130px !important;
z-index: -1;
visible: hidden;
}

.iconosBandera2 {
background: url("imagenes/iconoBanderas.jpg") no-repeat scroll -233px 0px transparent;
}

.iconosBandera3 {
background: url("imagenes/iconoBanderas.jpg") no-repeat scroll -256px 0px transparent;
}

.iconosBandera4 {
background: url("imagenes/iconoBanderas.jpg") no-repeat scroll -279px 0px transparent;
}

.posicionIconosBanderas {
float: right;
height: 30px;
margin-top: -5px;
width: 24px;
display: block;
}
el espaciado es una separación mas nada

No se si se puede hacer con CSS. Gracias a los que puedan ayudar, y al que no tgracias por interesarse en este quebranto de cabeza que tengo jejeje

No se si se puede hacer con CSS. Gracias a los que puedan ayudar, y al que no tambien gracias por interesarse en este quebranto de cabeza que tengo o se si se puede hacer con CSS. Gracias a los que puedan ayudar, y al que no tambien gracias por interesarse en este quebranto de cabeza que tengo