テーブル内の画像をマウスオーバーで拡大したい

テーブル(CSSで設定)内の画像をマウスオーバーで拡大するにはどうしたら良いでしょうか。javascriptは使用せず、CSSのみで設定したいのです。

今記述は下記の感じです。
【html】
<table border="0">
<tr>
<td class="type1" td colspan="2" scope="col" align="center" valign="middle"><a href="#"><img src="●●.jpg" alt="img_alt"/></a></td>
</a></td>
</tr>
</table>

【CSS】
td.type1 {
height: 172px;
width: 172px;
background-color:#FFF;
}

td.type1 img {
border: 1px solid #CCC;
padding: 5px;
}

足りない情報があればご指摘下さい。
よろしくお願い致します。

No.1 ベストアンサー 回答者： naokita 回答日時： 2011/07/30 02:04

色々方法はあるけど、画像置換えや背景を使わないという事かな？

-----------------------
td.type1 a:hover img{ width:320px; height:320px;}

↑こうするとか、↓こうするとか、

<a href="#" id="hover"><img src="画像" width="160" height="160" alt=""></a>

a#hover img{border:none;}
a#hover{ display:block; padding:5px; width:160px; height:160px; border: 1px solid #CCC;}
a#hover:hover{ width:320px; height:320px;}
a#hover:hover img{ width:100%; height:100%;}

この回答への補足

回答ありがとうございます。
後述のほうで試してみたのですが、拡大画像が他の要素の下に隠れてしまいます。
そして拡大時テーブルがずれるのですが。。

http://baker-street.jugem.jp/?eid=65
↑のサイトのように列もずれることなく、他の要素よりも一番上に出るようにするにはどうしたらいいでしょうか。

補足日時：2011/07/30 10:14

この回答へのお礼

解決しました。
どうもありがとうございました！
下記の記述です。

a#hover img{border:none; padding:5px; width:160px; height:120px; border: 1px solid #CCC;}
a#hover{ display:block; width:160px; height:120px;}
a#hover:hover img{ width:320px; height:249px; position:absolute; padding:5px; border: 1px solid #CCC; background-color:#FFF;}

お礼日時：2011/07/30 12:39