HTML

<div id="containerEx16">
<div class="ex16"><img src="http://jpeg" alt="" width="240" height="250" /> <img src="http://jpeg" alt="" width="240" height="250" /> </div>
</div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
#containerEx16 {width: 800px;
margin: 0 auto;
}
.ex16 img {
margin: 10px;
border-radius: 5% 20%;
border: 1px solid #ccc;
-webkit-box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.2); 
-moz-box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.2); 
 box-shadow:2px 2px 3px 3px rgba(0,0,0,0.2); 
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
-ms-transition-duration: 0.2s;opacity: 0.7; /*Nivel de opacidad de las imágenes*/margin: 0 10px 5px 0; /*Margen entre las imágenes*/
}
.ex16 img:hover {
 -webkit-transform:scale(1.1); /*Webkit: Escala de aumento de la imagen 1.2x tamaño original*/-moz-transform:scale(1.1);
>-o-transform:scale(1.1);
-ms-transform:scale(1.1);
box-shadow:#707070 4px 2px 2px; /*Sombra sobre toda la imagen*
/-webkit-box-shadow:#707070 4px 2px 2px;
-moz-box-shadow:#707070 4px 2px 2px;
-ms-box-shadow:#707070 4px 2px 2px; opacity: 1
;}--></style>