【CSS備忘録】マウスホバーで画像がちょっと拡大する CSS

  • URLをコピーしました!

サイト制作を始めて1年半、html、cssが身についてきた今日この頃です。
さまざまな方から伝授してもらい自分なりに作ったcssは可愛いものです。

今回ご紹介するのは、画像をボックス内に収めつつ、マウスホバーでちょっと拡大するCSSテクニックです。制作現場でもよく使う便利な方法なので、ぜひ参考にしてみてください。

↓こんなん

画像
画像
目次

実装例

まずは、基本のHTML構造から
このHTMLに対して、以下の2種類のCSSをご紹介します。

<div class="img_Wrapper">
    <img src="imgリンク" alt="画像">
</div>

一部の画像をトリミングしてボックスに収めるCss

画像

画像がボックスのサイズに合わない場合でも、必要な部分だけを表示するテクニックです。

ホバーすると画像が少し拡大して半透明になるので、シンプルながらおしゃれな演出ができます。

/*表示したいボックスサイズ*/
.img_Wrapper {
  overflow: hidden; /*拡大した時はみ出た部分を隠す*/
  width: 320px; /*boxサイズ*/
  height: 320px;
  margin: 1rem;
}
/*画像の調整*/
.img_Wrapper img {
  width: 100%; /*画像のサイズ*/
  height: 100%;
  object-fit: cover;/* 画像をクリッピングマスクする*/
  transition-duration: 0.3s; /*動く時間(なめらかになる)*/
}
/*ホバー*/
.img_Wrapper img:hover {
  transform: scale(1.2); /*拡大*/
  transition-duratiosn: 0.3s; /*動く時間(なめらかになる)*/
  opacity: 0.5;/*半透明になる*/
}

元の画像比率のままボックスに収めるCss

画像

こちらは、画像の比率を保ちつつ、ボックス内に収めたい場合に使えるテクニックです。

こちらは元の画像比率を保つので、全体を見せたい場合におすすめです。

/* 表示したいボックスサイズ */
.img_Wrapper {
  overflow: hidden; /* 拡大した時はみ出た部分を隠す */
  width: 320px; /* boxサイズ */
  height: 320px;
  margin: 1rem;
}

/* 画像の調整 */
.img_Wrapper img {
  width: 100%; /* 画像のサイズ */
  height: 100%;
  object-fit: contain; /* 元の画像サイズに合わせる */
  transition-duration: 0.3s; /* 動く時間(なめらかになる) */
}

/* ホバー */
.img_Wrapper img:hover {
  transform: scale(1.2); /* 拡大 */
  transition-duration: 0.3s; /* 動く時間(なめらかになる) */
  opacity: 0.5; /* 半透明になる */
}

どちらを選ぶべき?

使い分けのポイントは「どの部分を見せたいか」によります。

  • 強調したい部分を見せたいobject-fit: cover;
  • 画像全体をそのまま見せたいobject-fit: contain;

まとめ

今回ご紹介したCSSは、見た目のアクセントとして非常に使いやすいテクニックです。

初心者の方でも簡単に取り入れられるので、ぜひ実際の制作に活用してみてください!また、ホバーエフェクトを少しアレンジして、回転や色変更を加えるなど、オリジナルのデザインに発展させるのも楽しいですよ。

最後までお読みいただきありがとうございました!これからもCSSの便利なテクニックをたくさんご紹介していきますので、ぜひお楽しみに!

この記事が気に入ったら
フォローしてね!

share me!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次