【CSS】文字や画像をホバーしたときにズームイン&暗くする

CSSを使ってホバー時におしゃれなアニメーションを実装します

マウスを置いた(ホバーした)とき、文字や画像などの要素を拡大(要素サイズからはみ出た部分は非表示)したり暗くしたりする実装方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います!

なお、画像サイズを拡大表示(要素自体を拡大)させる方法は以下記事で紹介しています。本記事と合わせてご覧ください。

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例

ホバー時にズーム

マウスカーソルを乗せると文字が拡大します。(領域から溢れた部分は非表示。)

HELLO WORLD

ホバー時に暗転

マウスカーソルを乗せると全体が暗くなり。

HELLO WORLD

ホバー時にズーム&暗転

マウスカーソルを乗せると文字が拡大&暗くなります。

HELLO WORLD

コード

overflow: hidden;

要素の領域(ボックス)からはみ出た部分を非表示にするプロパティ。デフォルトでは「overflow: visible;」になっており、はみ出た部分も表示される。

transform: scale(数値);

要素を拡大・縮小するプロパティ。()内の数値を「2」にすると2倍に、「0.5」にすると半分になる。

ホバー時にズーム

HTML/CSS コードはこちら
<div class="cover-box">
  <div class="image-box">
    <p>HELLO WORLD</p>
  </div>
</div>
.cover-box {
  width: 200px;
  height: 200px;
  text-align: center;
  overflow: hidden;
}

.image-box {
  width: 100%;
  height: 100%;
  background: skyblue;
  transition: transform 0.3s ease;
}

p {
  margin: 0;
  font-size: 20px;
  line-height: 200px;
}

.image-box:hover {
  transform: scale(1.6);
}

ホバー時に暗転

HTML/CSS コードはこちら
<div class="cover-box">
  <div class="image-box">
    <p>HELLO WORLD</p>
  </div>
  <div class="dark-cover"></div>
</div>
.cover-box {
  width: 200px;
  height: 200px;
  text-align: center;
  position: relative;
}

.image-box {
  width: 100%;
  height: 100%;
  background: tomato;
  transition: transform 0.3s ease;
}

p {
  margin: 0;
  font-size: 20px;
  line-height: 200px;
}

.dark-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: .3;
  transition: background-color 0.3s ease;
}

.dark-cover:hover {
  background-color: black;
}

ホバー時にズーム&暗転

HTML/CSS コードはこちら
<div class="cover-box">
  <div class="image-box">
    <p>HELLO WORLD</p>
  </div>
  <div class="dark-cover"></div>
</div>
.cover-box {
  width: 200px;
  height: 200px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.image-box {
  width: 100%;
  height: 100%;
  background: lime;
  transition: transform 0.3s ease;
}

p {
  margin: 0;
  font-size: 20px;
  line-height: 200px;
}

.image-box:hover {
  transform: scale(1.6);
}

.dark-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: .3;
  transition: background-color 0.3s ease;
  pointer-events: none;
}

.image-box:hover + .dark-cover {
  background-color: black;
}

【おまけ】ホバー時に3Dアニメーション

ホバー時のアニメーションを立体的に行える、3DアニメーションもCSSで実装できます。

ホバーすると上からパタッと降りてくるようなアニメーション

Thank you for reading this article!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次