CSS

CSS｜マウスオーバーで画像に効果を入れる方法

ここでは画像をマウスオーバーしたときのスタイルシート効果サンプルを思いつく限り紹介していきます。

コンテンツ

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

ボタンで表示を切り替えてご覧ください。

See the Pen css_mouseover_img01 by kenichi (@ken81) on CodePen.

<div class="img_wrap">
  <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img03.png">
</div>

.img_wrap{
  border: 1px solid #ddd;
  width: 300px;
  height: 226px;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.img_wrap img{
  width: 100%;
  transition-duration: 0.5s;
}
.img_wrap:hover img{
  transform: scale(1.2);
  transition-duration: 0.5s;
}

ポイントは、画像が拡大したときに要素の外にはみ出さないようoverflow:hidden;を指定ところです。

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

See the Pen css_mouseover_img02 by kenichi (@ken81) on CodePen.

<div class="img_wrap">
  <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img03.png">
</div>

.img_wrap{
  border: 1px solid #ddd;
  width: 300px;
  height: 226px;
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}

見た目は、画像が明るくなったように見えますが、実際には画像を透明にして背景を透かせているだけです。そのため、背景が白くないときはこうはなりません。

マウスオーバーで画像を暗くする

See the Pen css_mouseover_img03 by kenichi (@ken81) on CodePen.

<div class="img_wrap">
  <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img03.png">
</div>

.img_wrap{
  border: 1px solid #ddd;
  width: 300px;
  height: 226px;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}

先ほどの画像を明るくするものに背景色background: #000;を入れただけです。

マウスオーバーで画像を少し傾けながら拡大する

See the Pen css_mouseover_img04 by kenichi (@ken81) on CodePen.

<div class="img_wrap">
  <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img03.png">
</div>

.img_wrap{
  border: 1px solid #ddd;
  width: 300px;
  height: 226px;
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.5s;
}
.img_wrap img:hover{
  transform: scale(1.2) rotate(9deg);
  transition-duration: 0.5s;
}

transform: scale(1.2) rotate(9deg);の部分で拡大と角度の指定をしています。

マウスオーバーで要素を浮かせる

See the Pen css_mouseover_img05 by kenichi (@ken81) on CodePen.

<div class="img_wrap">
  <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img03.png">
</div>

.img_wrap{
  border: 1px solid #ddd;
  width: 300px;
  height: 226px;
  margin: 20px auto 0;
  transition-duration: 0.5s;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
}
.img_wrap:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}

box-shadow: 10px 10px 10px rgba(0,0,0,0.5);で影を付けて、同時にtransform: translateY(-10px);で要素を上に移動させています。

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

See the Pen css_mouseover_img06 by kenichi (@ken81) on CodePen.

<div class="img_wrap">
  <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img03.png">
</div>

.img_wrap{
  border: 1px solid #ddd;
  width: 300px;
  height: 226px;
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 100%;
  transform: scale(1.1);
  cursor: pointer;
  filter: blur(5px);
  transition-duration: 0.5s;
}
.img_wrap img:hover{
  filter: blur(0);
  transition-duration: 0.5s;
}

filter: blur(5px);がぼかしの設定です。

マウスオーバーでモノクロからカラーに

See the Pen css_mouseover_img07 by kenichi (@ken81) on CodePen.

<div class="img_wrap">
  <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img03.png">
</div>

CSS

.img_wrap{
  border: 1px solid #ddd;
  width: 300px;
  height: 226px;
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 100%;
  transform: scale(1.1);
  cursor: pointer;
  filter: grayscale(100%);
  transition-duration: 0.5s;
}
.img_wrap img:hover{
  filter: grayscale(0);
  transition-duration: 0.5s;
}

filter: grayscale(100%);を指定すると画像がモノクロになります。

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

See the Pen css_mouseover_img08 by kenichi (@ken81) on CodePen.

<div class="img_wrap">
  <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img04.png">
</div>

body{
  background: #daeffd;
}
.img_wrap{
  width: 250px;
  height: 250px;
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
  border-radius: 50%;
  transition-duration: 0.3s;
}
.img_wrap img:hover{
  border-radius: 0;
  transition-duration: 0.3s;
}

正方形の要素にborder-radius: 50%;を指定すると丸くできます。

マウスオーバーで画像が回転する

See the Pen css_mouseover_img11 by kenichi (@ken81) on CodePen.

<div class="img_wrap">
  <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img04.png">
</div>

body{
  background: #daeffd;
}
.img_wrap{
  width: 250px;
  height: 250px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.5s;
}
.img_wrap img:hover{
  transform: rotate(360deg);
  transition-duration: 0.5s;
}

transform: rotate(360deg);で画像を回転させています。

マウスオーバーでヨコに回転する

See the Pen css_mouseover_img09 by kenichi (@ken81) on CodePen.

<div class="img_wrap">
  <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img03.png">
</div>

.img_wrap{
  width: 300px;
  height: 226px;
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.5s;
}
.img_wrap:hover img{
  transform: rotateY( 360deg );
  transition-duration: 0.5s;
}

transform: rotateY( 360deg );でヨコに回転させています。

マウスオーバーでタテに回転する

See the Pen css_mouseover_img10 by kenichi (@ken81) on CodePen.

<div class="img_wrap">
  <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img03.png">
</div>

.img_wrap{
  width: 300px;
  height: 226px;
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.5s;
}
.img_wrap:hover img{
  transform: rotateX( 360deg );
  transition-duration: 0.5s;
}

transform: rotateX( 360deg );でタテに回転させています。

マウスオーバーで画像が動き出す

See the Pen css_mouseover_img06 by kenichi (@ken81) on CodePen.

<div class="img_wrap">
  <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img01.png">
</div>

.img_wrap{
  border: 1px solid #ddd;
  width: 300px;
  height: 169px;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.img_wrap img{
  width: 100%;
}
.img_wrap:hover{
  background: url(https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img02.gif) 0 0 / 100% no-repeat;
}
.img_wrap:hover img{
  display: none;
}

マウスオーバー時に、画像をdisplay: none;で非表示にして、代わりにbackgroundで背景画像としてgif動画を表示させています。この方法だと２回目以降にマウスオーバーしたときに動画が途中から再生されてしまう場合があります。どんなタイミングでマウスオーバーしてもgif動画が最初から再生されるようにするには、jQueryを使った方が良いでしょう。

以上がマウスオーバーで画像に効果を入れる方法でした。

画像にマウスオーバーで写真を切り替えるCSSの作り方
2019.06.20
画像にマウスオーバーで写真を切り替えるCSSの作り方
ここでは画像にマウスオーバーしたときに、画像が切り替わるスタイルシートの書き方について見ていきます。画像の切り替えは、いろいろやり方があるみたいですが、難しいことは嫌いなので、ここでは単純に同じサイズの２つの写真を用意して、それをimgタグとして切り替えすると...

最近の記事

  1. 2023.03.8

    クリックでYouTube動画をポップアップ再生させ…

    WordPress内でリンクをクリックしたらYouTube動画がポップアップさ…

  2. 2020.11.22

    Photoshop｜写真の境界線をボカす方法

    Photoshop｜写真の境界線をボカす方法以前、こちらの記事…

  3. 2020.11.22

    Illustrator｜筆で描いた文字をパスに変え…

    Illustrator｜筆で描いた文字をパスに変える方法ここでは筆で書…

  4. 2020.11.8

    Illustrator｜ポカポカ温かい文字の作り方…

    ここでは、Illustratorを使ってこんな感じの温かい文字を作る方…

  5. 2020.09.14

    Illustrator｜同じ色を一括で変換したい

    Illustratorで同じ色をいろんなオブジェクトで使用している場合、色の変更…

  1. CSS

    CSS｜中央寄せが効かないときは・・・

  2. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…

  3. WordPress

    WordPressの立ち上げからサイト構築までの初期手順

  4. CSS

    レスポンシブウェブデザインの基本｜メディアクリエリの設定

  5. CSS

    要素の配置が簡単に決まるFlexboxの使い方
PAGE TOP