¿Cómo usar CSS para ampliar la imagen cuando el mouse pasa sobre ella?

El código fuente es el siguientelt;!DOCTYPE?htmlgt;

lt;htmlgt;

lt;headgt;meta?charset="UTF- 8" gt;lt;titlegt;CSS3 Mouse sobre imagen Zoom DEMO Demolt;/titlegt;lt;stylegt;

html{font-family:sans-serif;-ms-text-size-adjust:100 ;- webkit-text-size-adjust:: -ms-text-adjust:100}body{margin:0; -webkit-text-size-adjust.100}body{margin:0}artículo, aparte, detalles, figcaption , figura, pie de página, encabezado, grupo h, principal, navegación, sección, resumen {display: block} audio, lienzo, progreso, video {display: inline-block; vertical-align: baseline} audio: not ([controles]) { mostrar: ninguno; altura: 0}[oculto], plantilla{ mostrar: ninguno}a{fondo: transparente}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px?dotted}b ,strong {font-weight: negrita} dfn{font-style: italic}h1{font-size: 2em; margin: 0.67em?}mark{fondo: #ff0; color: #000}small{font-size: 80 }sub, sup{tamaño de fuente:75; altura de línea:0;posición:relativa;alineación vertical:línea de base}sup{arriba:-0.5em}sub{abajo:-0.25em}img{border:0}svg ：not (:root){overflow: oculto}figura{margin:1em?px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto} código, kbd, pre, samp{ familia de fuentes: monoespacio, ?monoespacio; tamaño de fuente: 1em} botón, entrada, grupo de opciones, seleccionar, área de texto { color: heredar; margen: 0} botón { desbordamiento: visible }, seleccione el botón {text-transform:none}, html?input[type="button"], input[type="reset"], input[type="submit"]{- webkit-appearance: cursor del botón; : puntero }botón[deshabilitado], html?entrada[

deshabilitado]{cursor: default}botón::-moz-focus-inner, entrada::-moz-focus-inner{border:0;padding:0}entrada{line-height:normal}entrada[type="checkbox" ], entrada[tipo="radio"]{-moz-box-sizing: border-box; box-sizing: border-box: 0} input[type="number"]::-webkit-inner-spin -botón, entrada[tipo="número"]: entrada[tipo="búsqueda"]: -webkit-inner-spin-button{altura:auto}entrada[tipo="búsqueda"]{apariencia-webkit:campo de texto; moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit - decoración de búsqueda{webkit-apariencia:none}conjunto de campos{border:1px?solid?# c0c0c0;margin:0?2px;padding:0.35em?.625em?0.75em}legend{border:0;padding:0}textarea { overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

lt;/stylegt;

lt; stylegt;

@import?url("/css?family=Lato");

*?{ margen:?0; -tamaño:?border-box;

}

cuerpo?{ fuente:?14px/1?Lato,?sans-serif; color:?#555; eee;

}

.gallery?{ ancho:?790px; margen:?30px?auto; fondo:?#333;

.gallery?gt;?div?{ posición:?relativa; float:?left; padding:?5px;

}

. ?gt;?div?gt;?img?{ ancho:?250px; transición:?.1s?transform; transformar:?translateZ(0); p>

.gallery?gt;?div:hover?{ z-index:?1;

}

.gallery?gt;?div:hover?gt ; ?img?{ transformar:?escala(1.5,?

1.5); transición:?.3s?transform;

}

.cf: antes,? .cf: después?{ display:?table content:?""; -altura:?0;

}

.cf: después?{ claro:?ambos;

}

h1?{ margen:?40px?; tamaño de fuente:?24px; alineación de texto:?centro; transformación de texto:?uppercase;

}

pie de página?{ margen:?80px? text-align:?center;

}

lt;/stylegt;

lt;script?src="js/prefixfree.min.js"gt ;lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;div? class="galería?cf"gt; ;divgt;

lt;img?src="landscape-test-1_1x.jpg"?/gt;lt;/divgt;lt;divgt;

lt;img?src ="iceberg_1x.jpg"?/gt;/divgt;divgt;

lt;img?src="igloo-800_1x.jpg"?/gt; divgt;

lt;img?src="trees_1x.jpg"?/gt; lt;/divgt;divgt;

lt;img?src="space_1x.jpg "?/gt;lt;/divgt;lt;divgt;

lt;img?src="render1_1x.jpg"?/gt;lt;/divgt;

lt; /divgt;

lt;div?style="text-align:center;clear:both;"gt;

lt;script?src="/gg_bd_ad_ 720x90.js" ?type="text/javascript"gt;lt;/scriptgt;

lt;script?src="/follow.js"?