css

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

2021年1月4日

 

こんにちは、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プロパティで要素の透明度を指定変更できます。

 

「0.0(完全に透明)~1.0(完全に不透明)」の数値で指定可能。

 

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

 

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

 

 

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

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-css