CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することができます。
画像をマウスオーバーした時にその画像を少し拡大させて表示させるなどをすると、
サイトに動きを出すことができるのでいいと思います。
下記にCSS3の「transform:scale()」を使用して画像をマウスオーバーした時に
拡大させて表示した時の方法をメモします。
■ 「transform:scale()」の使用方法
ブロック要素を固定させて画像を拡大させた場合の方法です。
画像をマウスオーバーするとアニメーションで拡大します。
【CSS】
.scale {
width: 400px;
height: 300px;
overflow: hidden;
}
.scale 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 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);
}
※「transition: all 0.5s linear;」で指定してもOKです。
allの場合は全てのプロパティに適用されます。
【HTML】
<div class="scale"> <img src="./css_scale.jpg"> </div>
【表示例】
「scale()」は下記のようにX方向とY方向で指定することもできます。
transform: scale(1.2,1.2);
また、縮小させて表示させたい場合は(0.8)のように1よりも小さい値を指定します。
サイト内の画像をマウスオーバーした時に動きを出したい場合など色々と利用できそうです。
自分のホームページの画像をマウスオーバーで拡大しようとしてここを見つけたのですが、すいません、使い方が全くわかりません。
基本的に画像をどこに置いたらよいのかがわかりません。
その画像の名前をどこに書いたらよいのかもわかりません。
いろいろ自分なりに試しているのですが、全く画像自体が表示されなくて弱っています。
ちなみに、自分のホームページの画像はいろいろ試行錯誤の末にこの形になったのですが、本来はマウスの位置で拡大するようにしたいと思っています。
それが出来ないので今の形でとりあえず公開しています。
初心者でもわかりやすい形で公開してもらえるとありがたいと思います。
よろしくお願いします。
池田 浩さん、コメントありがとうございます。
ホームページを拝見しました。画像は設置できているようなので、imgタグに対してCSS（スタイル）を適用させてください。
※上記はclass=”scale”で指定した要素内のimgタグにスタイルを適用するように記述しています。
私の方で試したところ、画像をマウスオーバーで拡大させることができました。
もう一度確認してみてください。
突然すみません。こちらのＣＳＳを利用させて頂いたところ、windowsでは下記のようになります。
ロールオーバーでズーム中：ピントがぼやけている
ズーム終了後：ピントが合ってる
ところが、macでは下記のようになっているそうなのです
ロールオーバーでズーム中：ピントが合っている
ズーム終了後：ピントがぼやけている
mac用の設定がいるのでしょうか。教えて下さい。
mazさん、コメントありがとうございます。
すいません、返信が遅くなりました。
今、確認できる環境（mac）がなくてちゃんと調べることができないでいます。
おそらくですが、画像のサイズやRetinaディスプレイが原因として考えられます。
ちゃんと答えられず、すいません。分かりましたら記載します。
ピンバック: マウスオーバー(:hover)で画像を拡大させる方法 - UOOWORKS