【CSS】ホバーした時に画像が拡大する方法

hoverの時に画像がふわっと拡大する方法

【本日実装したいこと】

hoverの時に画像がふわっと拡大させたい！

その実装方法は２種類あります。

①imgタグで画像を表示する場合

 <div class="ImgBox">

  <img src="画像のパス" class="ImgBox-Img">

 </div>

.ImgBox{ 

width: 280px;

height: 200px;

overflow: hidden; 

} 

.ImgBox-Img{

 transition-duration: 0.3s; 

}

.ImgBox-Img:hover{ 

transform: scale(1.2);

transition-duration: 0.3s; 

}

さらに、若干暗くして拡大させるには？

.ImgBox{ 

width: 280px;

height: 200px;

overflow: hidden;

background: #000;/*これを追加！*/

} 

.ImgBox-Img{

 transition-duration: 0.3s; 

}

.ImgBox-Img:hover{ 

transform: scale(1.2); 

transition-duration: 0.3s; 

opacity: 0.6;/*これを追加！*/

}

②backgroundで画像を表示する場合

<div class="ImgBox">

<div class="ImgBox-Img" style="background: url('画像のパス') no-repeat center;backgruond-size:cover;">

</div>

</div>

.ImgBox{
  width: 320px;
  overflow: hidden;
  background: #000;
}
.ImgBox-Img{
  width: 100%;
  padding-top: 75%;
  transition-duration: .3s;
}
.ImgBox-Img:hover{
  transition-duration: .3s;
  transform: scale(1.2);
  opacity: .6;
}

これはウェブサイトでよく使うので、覚えちゃいましょう！

今日もお疲れ様でした。