http://4-ever.org/expanding-images
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; }

Table below is from :
http://www.reeddesign.co.uk/test/points-pixels.html


   
Points
   
Pixels
   
Ems
   
Percent


   
6pt
   
8px
   
0.5em
   
50%


   
7pt
   
9px
   
0.55em
   
55%


   
7.5pt
   
10px
   
0.625em
   
62.5%


   
8pt
   
11px
   
0.7em
   
70%


   
9pt
   
12px
   
0.75em
   
75%


   
10pt
   
13px
   
0.8em
   
80%


   
10.5pt
   
14px
   
0.875em
   
87.5%


   
11pt
   
15px
   
0.95em
   
95%


   
12pt
   
16px
   
1em
   
100%


   
13pt
   
17px
   
1.05em
   
105%


   
13.5pt
   
18px
   
1.125em
   
112.5%


   
14pt
   
19px
   
1.2em
   
120%


   
14.5pt
   
20px
   
1.25em
   
125%


   
15pt
   
21px
   
1.3em
   
130%


   
16pt
   
22px
   
1.4em
   
140%


   
17pt
   
23px
   
1.45em
   
145%


   
18pt
   
24px
   
1.5em
   
150%


   
20pt
   
26px
   
1.6em
   
160%


   
22pt
   
29px
   
1.8em
   
180%


   
24pt
   
32px
   
2em
   
200%


   
26pt
   
35px
   
2.2em
   
220%


   
27pt
   
36px
   
2.25em
   
225%


   
28pt
   
37px
   
2.3em
   
230%


   
29pt
   
38px
   
2.35em
   
235%


   
30pt
   
40px
   
2.45em
   
245%


   
32pt
   
42px
   
2.55em
   
255%


   
34pt
   
45px
   
2.75em
   
275%


   
36pt
   
48px
   
3em
   
300%