マウスオーバー時に画像を拡大する
CSS3の「transform:scale()」を使用して、マウスオーバー時に
画像を拡大するようにしてみた。(画像サイズは枠内で固定)
[サンプル] 曲げわっぱ

スタイルシートの指定
.scale_up img {
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
transition: transform 0.5s linear;
}
.scale_up img:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
参考サイト:CSS:CSS3の「transform:scale()」でhoverした時に画像を拡大する
ブログ記事全体で使う場合 各画像サイズが異なるので
[編集]記事の改行扱いを「HTMLタグのみ」に指定し、
画像サイズを記事毎にスタイル指定する。
(例) 上記の画像の場合
【スポンサーリンク】
[編集]記事の改行扱いを「HTMLタグのみ」に指定し、
画像サイズを記事毎にスタイル指定する。
(例) 上記の画像の場合
<style>
.scale_up {
width: 300px;height: 200px;
border: 1px solid #CCC;overflow: hidden;
}
</style>