Ampliar imágenes con mouse y CSS

Ya habíamos explicado un código para ampliar imágenes con el mouse y Javascript y gracias a el comentario de Italo Disco Style, que preguntaba si se podía traducir a ese código Javascript a CSS. Lo cual dio resultado a lo siguiente.

El inconveniente aqui es que no usaremos javascript, por lo que necesitaremos definir cada uno de los ID de cada imagen.

El código CSS es el siguiente:

#img {
  width:300px; /* Este es el ancho de la imagen pequeña */
  height:400px; /* Este es el alto de la imagen pequeña */
  background: url(URL DE LA IMAGEN REDUCIDA) no-repeat top left;
  border:none;
}

#img:hover {
  width:410px; /* Este es el ancho de la imagen grande */
  height:546px; /* Este es el alto de la imagen grande */
  background: url(URL DE LA IMAGEN GRANDE) no-repeat top left;
}

El código HTML es el siguiente:

<img id='img'/>

Lo que cabe rescatar es que para cada imagen en la que utilices este efecto deverás colocarle un id='img1',id='img2', es decir que incremente cada imagen y lo mismo con el CSS, #img1, #img2.