マウスオーバー時に画像を拡大する
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した時に画像を拡大する
ブログ記事全体で使う場合 各画像サイズが異なるので
［編集］記事の改行扱いを「ＨＴＭＬタグのみ」に指定し､
画像サイズを記事毎にスタイル指定する。
（例） 上記の画像の場合
【スポンサーリンク】
［編集］記事の改行扱いを「ＨＴＭＬタグのみ」に指定し､
画像サイズを記事毎にスタイル指定する。
（例） 上記の画像の場合
＜style＞
.scale_up {
width: 300px;height: 200px;
border: 1px solid #CCC;overflow: hidden;
}
＜/style＞
