【サンプルあり】ホバー時に画像が拡大するアニメーション

khiroWebエンジニア(@khiro14726723)です。

このwordpressテーマで使われているような、画像にカーソルを当てた時の挙動はどのように実装すれば良いのでしょうか。

gyazo.com

実際にサンプルサイトを作ってみました。

サンプル

ki-hi-ro.com
タブレット、スマホの場合は、タッチすると拡大します。

git hubのリポジトリ(Zipファイルのダウンロード可能)

github.com
bootstrapを使用しています。

キャプチャ動画

gyazo.com

解説

HTML

<div class="img-wrap">
  <img src="assets/img/cats.jpg" alt="cats" class="img-fluid">
</div>

imgをimg-wrapで囲います。

SASS

.img-wrap {
  overflow: hidden;
  img {
    transition: 0.5s;
    &:hover {
      transform: scale(1.2, 1.2);
    }
  }
}

コンパイル後のCSS

.img-wrap {
  overflow: hidden;
}

.img-wrap img {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.img-wrap img:hover {
  -webkit-transform: scale(1.2, 1.2);
          transform: scale(1.2, 1.2);
}

scale(1.2,1.2)で、img(画像)ホバー時に、拡大させ、

transition: 0.5s;で、変化のスピードを調整し、

imgの親要素、img-wrapにoverflow: hidden;を指定することで、画像が拡大して、はみ出た部分を隠しています。

参考書の紹介

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

Bootstrap 4 フロントエンド開発の教科書