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タグのみ」に指定し、
画像サイズを記事毎にスタイル指定する。

(例) 上記の画像の場合

<style>
.scale_up {
   width: 300px;height: 200px;
   border: 1px solid #CCC;overflow: hidden;
}
</style>

【スポンサーリンク】

CM一覧 ( 0件)

まだコメントはありません。

CM投稿

NAME
TITLE
WEBSITE
COMMENT
PASSWORD
SECRET