<style>
/* en el div contenedor se verá la imagen en forma de miniatura */
.figure {
background-color: #FFF;
border: 10px solid #FFF;
left:40%; /* la posición en la pantalla es la parte engorrosa del asunto */
position: relative;
width:120px; /* el tamaño de la miniatura */
-moz-box-shadow: 0 3px 10px #CCC; /* algo de sombra en Mozilla y Chorme */
-webkit-box-shadow:  0 3px 10px #CCC;
-moz-transform: rotate(3deg); /* lo rotamos levemente en Mozilla y Chorme */
-webkit-transform: rotate(3deg);
}
/* la imagen */
.figure img { width:100%; }
/* el texto */
.figure span {
display: block;
text-align: center;
/* cualquier otra propeidad, color, tamaño y tipo de fuente, etc */
}
/* el efecto al poner el cursor encima */
.figure:hover {
z-index: 9999;
/* eliminamos la rotación y ampliamos la imagen por ejemplo tres veces */
-webkit-transform: rotate(0deg) scale(3);
-moz-transform: rotate(0deg) scale(3);
}
</style>
<!-- y le ponemos algún hack extra para adaptarlo a Internet Explorer 8>
<!--[if IE]>
<style>
.figure {
/* rotamos el DIV */
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9986295347545738, M12=-0.05233595624294383, M21=0.05233595624294383, M22=0.9986295347545738);
/* lo posicionamos como se pueda */
left:20%;
}
.figure:hover {
/* anulamos la rotación */
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1);
/* dimensionamos el DIV */
width:360px; 
}
</style>
<![endif]-->

<div class="figure">
<img src="URL_imagen">
<span class="figcaption"> el texto a mostrar </span>
</div>