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

2022年7月9日2022年7月12日

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

画像を指定したboxのサイズ内に納めたい時のCSS備忘録です。
↓こんなん

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

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

CSS
元の画像比率のままボックスに収める時はこっち
/*表示したいボックスサイズ*/
.imgWrap {
  overflow: hidden; /*拡大した時はみ出た部分を隠す*
  width: 320px; /*boxサイズ*/
  height: 320px;
  margin: 1rem;
}
/*画像の調整*/
.imgWrap img {
  width: 100%; /*画像のサイズ*/
  height: 100%;
  object-fit: contain; /*元の画像サイズに合わせる*/
  transition-duration: 0.3s; /*動く時間(なめらかになる)*/
}
/*ホバー*/
.imgWrap img:hover {
  transform: scale(1.2); /*拡大*/
  transition-duratiosn: 0.3s; /*動く時間(なめらかになる)*/
  opacity: 0.5;/*半透明になる*/
}