マウスオーバーすると画像が拡大するサンプル

下記の zoom1.htm と zoom2.htm は、画像をマウスオーバー(マウスホバー)すると、その画像が拡大するサンプル html です。

zoom1.htm
<html>
<head>
<style>
img.zoom:hover{transform:scale(5); transition:1s;}
</style>
</head>
<body>
<img class="zoom" src="image.jpg" width="100"/>
</body>
</html>

zoom2.htm
<html>
<head>
<style>
table{left:0; right:0; margin:auto;}
.zoom img:hover{transform:scale(2); transition:1s;}
</style>
</head>
<body>
<table class="zoom">
<tr>
<td><img src="image1.jpg" width="100"/></td>
<td><img src="image2.jpg" width="100"/></td>
</tr>
<tr>
<td><img src="image3.jpg" width="100"/></td>
<td><img src="image4.jpg" width="100"/></td>
</tr>
</table>
</body>
</html>

href.htm
<html>
<body>
<div align="center">
<a href="image.jpg" target="_blank">
<img src="image.jpg" width="100"/>
</a>
</div>
</body>
</html>

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中