Life is Tech! Lesson
オリジナル制作サンプル集
カーソルが通過した時に写真を拡大させる
難易度：
プロパティ：transform
関連レッスン：Chapter 1 レッスン 5
できあがりイメージ
つくりかた
Step1
拡大させる要素をHTMLから探す
HTML
<div class="big">
<img src="img/cro-big.jpg" width="500">
<h3>サクサククロワッサン</h3>
</div>
HTMLの"big"というクラス名のdivタグの中にある、画像 (imgタグ) に対してCSSを反映させていきます。
Step2
拡大させる要素のCSSセレクタを作る
CSS
.big img:hover {
}
クラス名"big"内の img をカーソルが通過した時 (hover時) に拡大させます。
Step3
拡大率を指定する
transform を追加して、拡大率を指定しましょう。
CSS
.big img:hover {
transform:scale(1.2);
}
scale で拡大率が指定できます。1.2 は今の画像の1.2 倍に拡大される設定です。
Step4
コードを書くかコピー＆ペーストする
CSS
transform:scale(1.2);
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
ワンポイント解説
画像の拡大をゆるやかにしたい場合は transition を指定します。
CSS
.big img:hover {
transform:scale(1.2);
transition:0.3s;
}
Step5
実際の見え方を確認する
画像をhoverしたとき、画像が拡大していれば完成です。
