Labyrinth of Wisdom

-This is My Archive-


マウスオーバーで画像を拡大表示する方法 (CSS3を用いて)

マウスを乗せると画像がにょーんと拡大するようなサイトは沢山ある。 筆者も同じようなことをRailsアプリにjQueryを使って実装しよう!と思ったのですが、色々調べている内にこっちの方が分かりやすかったので路線変更。
大事なのは方法ではなく問題を解決することだと思う、と言い訳しておきます。
他の方法はまた分かり次第まとめる予定。

まず下記のようなフォルダを作ってファイルを用意。

フォルダ構成

- sampleフォルダ
    - zoom_sample.html
    - imgフォルダ
        - logo.png
    - cssフォルダ
        - style.css
htmlファイルとcssファイルの中身を下記の様に記述。

サンプルコード HTML

<!-- zoom_sample.html -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <!-- CSSファイル読み込み -->
        <link rel="stylesheet" type="text/css" href="css/style.css">

        <title>sample</title>
    </head>
    <body>
        <!-- imgタグを"zoomクラス"で囲う -->
        <div class="zoom">
          <img src="img/logo.png" alt="logo">
        </div>
    </body>
</html>

サンプルコード CSS

/* style.css */

/*
※ベンダープレフィックス
-webkit-...Chrome/safari対応
-moz-...Firefox対応
-ms-...IE対応
-o-...Opera対応
*/

/* 画像をズームさせる場合はこのコードを記述する(大きさを変えたくない場合) */
.zoom{
  height: 200px;
  width: 200px;
  overflow: hidden; /* はみ出した要素を表示しない */
}

/* zoomクラスの変化にかかる時間の指定をする(今回は1秒) */
.zoom img{
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -ms-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}

/* :hover を記述し、(zoomクラス指定されたimgタグ内の)要素にマウスを乗せた時の形状変化の指定をする(今回は1.2倍大きくなる) */
.zoom img:hover {
  opacity: 0.6; /*半透明にする*/
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

コード記述が完了したらhtmlファイルを開いてみましょう。
マウスを乗せると画像が拡大、離すと元に戻るはず。

あとは各々の環境に応じてフォルダ名やらファイル名やらを変えればうまく実装できるはず。

以上