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

 

こんにちは、keiです

 

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

 

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

 

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

 

[toc]

 

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

 

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

 

 

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()」でオンマウス前の画像のぼかし度を調整できます。