image gallery using tables

by OmShiv

HTML

<table>
    <tr>
        <td>
            <img src='http://img511.imageshack.us/img511/8963/blackchococakexxsmall.jpg'>
        </td>
        <td>
            <img src='http://img412.imageshack.us/img412/7626/blackforesticecreamxxsm.jpg'>
        </td>
        <td>
            <img src='http://img401.imageshack.us/img401/6011/butterflychocowcherryli.jpg'>
        </td>
    </tr>
    <tr>
        <td>
            <img src='http://img508.imageshack.us/img508/16/chocolatinexxsmall.jpg'>
        </td>
        <td>
            <img src='http://img24.imageshack.us/img24/4968/kprofiterolexxsmall.jpg'>
        </td>
        <td>
            <img src='http://img39.imageshack.us/img39/3351/macaronsxxsmalldnh.jpg'>
        </td>
    </tr>
</table>
<div class='info'>Hover over the images. I got the idea after seeing <a href='http://www.cssplay.co.uk/menu/cssplay-grid-accordian.html' target='_blank'>this image gallery demo</a> (which uses background images on <code>td</code> elements)</div>

CSS

table {
    width: 480px;
    margin: 10px auto;
}
td {
    width: 160px;
    height: 135px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
img {
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -160px;
    position: absolute;   
}
table:hover td {
    width:80px;
    height:30px;
    
}
table:hover tr:hover td {
    height:240px;
}
table td:hover {
    width:320px;
    height:240px;
}
.info {
    margin: 20px;
    padding: 8px;
    background: #ddd;
}