1 Decide the maximum size of the image to fit nicely in the column. For my purposes I found it best to make the images all the same width.
For example, my images are 175px wide


2 Save a good clear image at full size. Note the width and height in pixels and use these in the web page html.
eg, img src="short.gif" width="175px" height="100px" alt="short" class="image short"


3 Decide the optimum minimum size of the image. Again I found all the same width was best for me.
eg, width 88px


4 Convert this min width from pixels into ems.
eg, 88px = 8.8em. (Read about ems below)


5 Convert the heights of the small images into ems.
eg, 50px = 5ems. (Read about ems below)


6 Give two classes to each image, one the same for all, one different.
eg, img src="tall.gif" width="175px" height="300px" alt="lankie" class="image tall"


7 In the css, assign the small em width to the similar classes, and assign the heights in ems to the other image classes. (If all your images are the same size, of course, you only need one class for each)
eg, .image {width: 8.8em; } .short {height: 5em; } .tall {height: 15em; }


8 In the css, assign a font-size to the hover. On hover, the image width will expand from its min to its max and the height will also expand with it. To get the right font-size read about ems below.
eg, .expand a:hover {font-size: 2em; }