狼読

2020/05/03

[css]cssで画像をhover時に拡大するアニメーションを作ってみよう

今回は、cssで画像にマウスポインターを合わせた時に拡大するアニメーションの作り方をご紹介したいと思います。このような画像が拡大する動きはいろんなサイトで使われていますね。今回はその画像をどうやって拡大させているのかということをご紹介したいと思います。

HTMLのご紹介

画像をcssを使ってズームさせるためのhtmlを用意しましょう。

今回はサンプルとして次のようなhtmlをご用意しました。

<div class="imgzoom"><img src="画像のURL"></div>

サンプル画像を使った実装例

htmlの構造は非常にシンプルでdivタグの中に画像を入れるだけとなっております。では、次はこれを使ってcssでズームするアニメーションを作っていきましょう。

画像をcssを使ってズームしてみよう

cssで画像をズームさせるためには、transformのscaleというものを使用します。上記の画像を少し小さくして使用してみましょうか。

下記の画像にマウスを当ててみてください。画像が拡大するのがわかるでしょうか。こちらの方法を使うことで画像をズームすることができます。

上記の画像では、ただ画像が大きくなっただけじゃない？

って思う方もいらっしゃるかと思います。実はその通りなのです。画像がズームされているのは画像が大きくなってはみ出た部分を見えないようにすることで画像をズームさせているのです。ではどのように記述するのかについてご紹介していきたいと思います。

<style>
 .imgzoom{
    width:100%;
    overflow:hidden;//はみ出た部分を見えないようにします
 }
 .imgzoom img{
   width:100%;
 }
 .imgzoom img:hover{
   transform:scale(2);//hoverした時に拡大します
  }
</style>
<div class="imgzoom"><img  src="画像のURL"></div>

画像を拡大するサンプル実装例

上記のように画像が拡大される動作になりましたね。これはhoverすると画像が大きくなってそのはみ出た部分は見えないようにすることで実際に実装されています。あとは、アニメーションをつけてゆっくり大きくなって戻っていくという動作を作ってみましょう。こちらもcssで記述することができます。

<style>
 .imgzoom{
    width:100%;
    overflow:hidden;
 }
 .imgzoom img{
   width:100%;
   transition:1s all;
 }
 .imgzoom img:hover{
   transform:scale(2);
   transition:1s all;
  }
</style>
<div class="imgzoom"><img  src="https://info-wcn.com/wp-content/uploads/2020/03/branch-4705310_1920.jpg"></div>