Hacer que gire una imagen 180º y añadirle texto detras de la imagen cuando pases el raton por encima.  

Buenos días,
He estado buscando algún código css pero no lo he encontrado, a ver si ustedes me pueden ayudar.

Quiero hacer un hover que gire 180º y en la parte de atrás añadirle algo de texto, hasta ahora solo he conseguido convertir una imagen normal en una redonda, hacer que haga un zoom al pasar el ratón por encima pero quiero que también se voltee 180º para añadirle el nombre de la foto detrás de la imagen.

el codigo css que llevo utilizado es:

.zoom{
width: 205px;
height: 205px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
border-radius: 150px;
box-shadow: 0 0 20px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
transition: 1.5ms ease;
 -moz-transition: 1.5s ease; /* Firefox */
 -webkit-transition: 1.5s ease; /* Chrome - Safari */
 -o-transition: 1.5s ease; /* Opera */
}
.zoom:hover{
transform : scale(1.2);
-moz-transform : scale(1.1); /* Firefox */
-webkit-transform : scale(1.1); /* Chrome - Safari */
-o-transform : scale(1.1); /* Opera */
-ms-transform : scale(1.1); /* IE9 */	}

Y el codigo html es:

A ver si me pudiesen ayudar.
Un cordial saludo
Guillermo Delgado

URL del sitio: Contenido solo visible a usuarios registrados