CSSを使ってマウスオーバー時に画像をホバーエフェクトさせる方法

 

こんにちは、keiです

 

今回は、CSSを使ってマウスオーバー時に画像をホバーエフェクトさせるやり方について紹介します。

 

マウスオーバー時のホバーエフェクトといっても色んな方法があります。

 

サンプルを一覧にしてまとめてみましたので参考になりましたら幸いです。

 

マウスオーバー時に画像を拡大する

 

マウスオーバー時の画像拡大は、以下の感じです。

 

 

HTMLはclass指定をします。今回は仮で「image_mouseover_1」とします。

 

 html
<div class="image_mouseover_1">
  <img src="画像">
</div>

 

CSSは以下の通り。

 

 CSS
.image_mouseover_1{
overflow: hidden;
width: 300px;
}
.image_mouseover_1 img{
display:block;
transform: scale(1.5,1.5);
transition-duration: 0.8s;
}
.image_mouseover_1 img:hover{
transform: scale(1,1);
transition-duration: 0.5s;
}

 

transformプロパティのscale()で、画像の縮小範囲を指定しています。

 

マウスオーバー時に画像を明るくする

 

続いてマウスオーバー時に画像を明るくするサンプルです。

 

 

 html
<div class="image_mouseover_2">
  <img src="画像">
</div>

 

 CSS
.image_mouseover_2{
overflow: hidden;
width: 300px;
height: 200px;
margin: 0 auto;
}
.image_mouseover_2 img{
width: 300px;
height: 200px;
cursor: pointer;
transition-duration: 0.3s;
}
.image_mouseover_2:hover img{
opacity: 0.6;
transition-duration: 0.3s;
}

 

opacityプロパティで要素の透明度を指定変更できます。

 

 

マウスオーバーで丸い画像を正方形にする

 

マウスオーバーで丸い画像を正方形にするサンプルです。

 

 

 html
<div class="image_mouseover_3">
  <img src="画像">
</div>

 

 CSS
.image_mouseover_3{
width: 250px;
height: 250px;
overflow: hidden;
}
.image_mouseover_3 img{
width: 100%;
cursor: pointer;
border-radius: 50%;
transition-duration: 0.3s;
}
.image_mouseover_3 img:hover{
border-radius: 0;
transition-duration: 0.3s;
}

 

border-radius は画像ボックスのカドを丸くするプロパティで、50%に設定することで円形になります。

 

また、transition-durationプロパティで0.3秒後に正方形になるように指定しています。

 

マウスオーバーで画像のぼかしを消す

 

最後にマウスオーバー時に画像のぼかしを消す方法です。

 

 

 html
<div class="image_mouseover_4">
  <img src="画像">
</div>

 

 CSS
.image_mouseover_4{
width: 300px;
height: 226px;
overflow: hidden;
}
.image_mouseover_4 img{
width: 100%;
transform: scale(1.1);
cursor: pointer;
filter: blur(5px);
transition-duration: 0.5s;
}
.image_mouseover_4 img:hover{
-webkit-filter: blur(0);
filter: blur(0);
transition-duration: 0.5s;
}

 

「blur()」でオンマウス前の画像のぼかし度を調整できます。