【CSS】画像をホバーでちょっと拡大


どうも、こんにちは。
友太郎(@yutarou_sakai)です。

今回は「画像をホバーしたときにちょっと拡大」を表現するCSSをご紹介します。

簡単にちょっとおしゃれなサイトになりますので、ぜひ取り入れてみてください!

使う言語

  • HTML
  • CSS

一応HTMLも書いていますが、実質CSSだけです。

コピペでサクッと作っちゃいましょう!

コード

今回のコードがこちらです。


.image {
  overflow: hidden;
}

.image img {
  display: block;
  transition-duration: 0.3s;
}

.image img:hover {
  transform: scale(1.3);
  transition-duration: 0.3s;
}

これだけ!簡単!

HTMLには、画像の親要素にimageクラスを追加してください。

軽く解説

今回のコードの役割は以下です。

  • :hoverで拡大サイズと動きの速さを指定
  • imgで動きの速さを指定
  • .image子要素の画像が拡大するのではみ出た分は隠す!

だいたい上記のイメージです。

transform: scale(1.3);の数字部分を変更すれば、拡大率を変更することができますよ。
数字部分を色々変更してみて、お気に入りの動きを見つけてください!

それでは以上ですm(__)m