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

質問

テーブル(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 · ベストアンサー

色々方法はあるけど、画像置換えや背景を使わないという事かな？
-----------------------
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%;}

お礼

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

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;}

補足

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

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