Algo más sobre expandir imágenes

Hay cientos de formas de usar imágenes en miniatura y luego expandirlas; podemos emplear JavaScript, CSS o combinar ambas cosas pero, si no se quiere andar lidiando con muchos códigos y sofisticaciones, también podemos usar propiedades simples.

Así como width y height definen el ancho y alto de algún elemento, max-width y max-height nos permiten limitar esos tamaños y dar valores máximos. Por ejemplo, si desconocemos el tamaño de una imagen y queremos que no se desborde, basta establecer la propiedad max-width para que se muestre ... como pueda.

Funcionan igual que width y height así que no es necesario definir ambos datos, si establecemos max-width, la altura la calculará el navegador y será proporcional.; lo mismo ocurre si utilizamos max-height aunque a veces es necesario agregar ambas para insertar cosas en cierto contenedor que tiene un tamaño fijo.

Aprovechando esto, podríamos crear una clase y usarla en una etiqueta IMG donde colocaremos la imagen con su tamaño original:

<img class="expa" src="URL_imagen_original" />

Y ahora, escribimos las reglas:

<style>
  img.expa {
    cursor: pointer;
    max-width: 150px;
  }
  img.expa:hover {
    max-width: none;
  }
</style>

La primera establece el tamaño máximo con que se mostrará la imagen y la segunda, elimina esa propiedad cuando ponemos el cursor encima.