狼読

 
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>

画像をhoverした際にアニメーションのようにズームする動きの実装例

hoverすると画像がズームするアニメーションが作ることができましたね。
こちらは、transitionを設定することでscaleする時としないときにかかる時間を設定することでこのようなアニメーションを実装することができます。

まとめ

今回は、画像をhoverするとズームするアニメーションの作り方についてご紹介させていただきました。このような動きは非常に多くのサイトで使用されております。作り方がわからないといった方のお力になれれば幸いです。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

投稿カレンダー

2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031

Technology

category

©狼読