カーソルを合わせたらズームアップをCSSでお手軽実装

マウスのカーソルを合わせると画像がズームアップするエフェクト。見栄えがしていいですよね。ということで、以前、cssでの切り抜きに付け加える形でお手軽に実装できちゃったのでご紹介したいと思います。まずは、CSSで画像を簡易切り抜きの切り抜きを簡単におさらいしましょう～。

CSSで画像を簡易切り抜き

imgタグなどで縦横の長さを固定にしたとき、縦横比が違う画像を表示したりした際につぶれちゃったり伸びちゃったりしますよね。そんなとき...

tks-kan.com

切り抜きのおさらい

切り抜きの際に使用したのはimgをspanタグで囲ってしまって、スタイルで表示したい画像サイズを指定。はみ出る部分を非表示にするためにoverflow: hidden;で処理する。imgのスタイルは幅のみ100%で指定という感じでした。

.kirinuki {
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.card .kirinuki img {
    width: 100%;
    /*height: 200px;*/
}

ここでのoverflow: hidden;がポイント。はみ出たものは非表示という状態なので、画像を変化させた場合も範囲以外は非表示のままになります。

マウスカーソルを合わせたら画像を拡大させる処理

cssでカーソルがその要素にあった場合にスタイルを指定するには:hoverを使います。ここではkirinuki要素部分にカーソルが来たら…という処理にしたいので

.kirinuki:hover {
    /*ここにスタイルを記入*/
}

という感じに記述します。ただ、実際にはkirinukiクラス内にあるimgをズームアップ（拡大）したいので以下のように書き直します。

.kirinuki:hover img {
    transform: scale(1.5);
}

transformは要素の変形させる際に使うプロパティで、ここでは1.5倍に変形させてます。ただ、このままだとカーソルを合わせた瞬間に画像が拡大されてしまうので、ズームアップという感じではないんですよね。なので、もう少し改良していきます。
まずは、ここまでの状態のコードを一旦載せますね。そのままコピペで試すことができるかと思います。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>zoom_up_test</title>
    <style type="text/css" media="screen">
.card {
    width: 400px;
    margin: 1rem;
    padding: 1rem;
    border: dotted 2px gray;
}

.kirinuki {
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.card .kirinuki img {
    width: 100%;
    /*height: 200px;*/
}

.kirinuki:hover img {
    transform: scale(1.5);
}

.card h2 {
    font-size: 16px;
}
.card p {
    font-size: 12px;
}
    </style>
</head>
<body>
    <div id="cardlist">
        <div class="card">
            <span class="kirinuki"><img src="https://tks-kan.com/wp/wp-content/uploads/2016/08/IMAG0100.jpg" alt="red5"></span>
            <h2>RED ５ Williams</h2>
            <p>懐かしいWilliams Renaultのマシン。キャノン部分のイエローも映えてて大好きなマシンでした。</p>
        </div>
    </div>
</body>
</html>

たった一行追加で、ズームアップをスムーズに！

スムーズにするためには時間経過による変化を指定します。文字で書くとややこしい印象ですが、cssでtransitionを指定してあげるだけでOKです。

transition: all 0.8s;

transitionも細かく設定できるのですが、ここはお手軽にall（すべて）に対して、変化に掛かる時間を0.8s（秒）としました。これをimgのスタイルに指定してあげましょう。基本的にはほとんどのブラウザで動くはずですが、念のため、webkitも付与したものも追加しておきます。

.card .kirinuki img {
    width: 100%;
    /*height: 200px;*/
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}

これだけでスムーズな処理完了です！簡単ですよね。実際に上記の部分を追加してみて確認すると…どうでしょう、スムーズなズームアップ処理ができたのではないでしょうか？

まとめ：ちょっとした仕掛けでリッチな印象に

こういうギミックって、手軽にできるならやってみようかなってなると思うんですよね。手軽でリッチな印象になるなら、こんなにお得なことはないでしょう。ただ、あちこちにギミックを入れ過ぎてもなんとなく落ち着かないページになってしまいます。効果的に使って、素敵なサイトに仕上げてみてください。