広告 Web

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に関する役立つ情報を発信していきます。【経歴】▶︎Webディレクター就職(歴9年)(コーディング・SEOが好きです!)▶︎ブログ開設

-Web