マウスホバーで変化！ボックスを動かすおしゃれな演出4選

CSS、JavaScript

マウスを乗せたときに、ボックスがふわっと変化する演出を見たことはありませんか？
実はこのようなマウスホバーアニメーションは、CSSやJavaScriptを少し使うだけで、簡単に実装できるんです。

この記事では、初心者の方でも迷わず導入・編集ができるように、「編集するならここ！」というカスタマイズ解説付きで紹介しています。
デザインの幅を広げたい方は、ぜひそのままコピペして使ってみてください！

1.CSSだけでできる！シンプルな角丸＋色変化アニメーション

CSSの基本的な書き方だけで、ホバー時に色と形が変わるアニメーションを作れます。JavaScript不要なので、まずはここから始めるのがおすすめ！

HTML

<div class="grid-container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  ...
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 80%;
  margin: 0 auto;
}

.box {
  border: 1px solid #ccc;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  transition: all 0.8s ease; /*色の変化スピードを変える*/
  overflow: hidden;
}

.box:hover {
  background-color: #000; /*背景色を変える*/
  color: #fff;
  border-radius: 40%; /*角の丸みを変える*/
}
変更したいこと編集する場所例
角の丸みを変えるborder-radius40% → 100%で丸型に
背景色を変えるbackground-color#000 → #ff6347（赤）
色の変化スピードを変えるtransition0.8s → 0.3sで早く

サンプル

各要素にマウスが重なると色が反転し、角丸になります。

See the Pen Hover Effect_CSS-A by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

2.JavaScriptでランダムな共通角丸に

マウスを乗せるたびに、毎回違う角の丸みになるインタラクティブな演出。動きに遊び心を加えたいときにぴったりです！

先ほど紹介した『1.CSSのみで角丸（共通）＋色変化』のHTMLとCSSをそのまま利用しますが、Scriptを追加することでランダムサイズで角丸になります。

JavaScript

const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.addEventListener('mouseenter', () => {
    const randomRadius = Math.floor(Math.random() * 61) + 10; //丸みの最大値を広げたい
    box.style.borderRadius = `${randomRadius}%`;
  });

  box.addEventListener('mouseleave', () => {
    box.style.borderRadius = '0%'; //ホバー解除後も少し丸くしたい
  });
});
やりたいこと編集する場所例
丸みの最大値を広げたいMath.random() * 61* 91でより大きく
ホバー解除後も少し丸くしたいbox.style.borderRadius = '0%''10%'などに変更

サンプル

各要素にマウスが重なると色が反転し、角丸はランダムのサイズになります。

See the Pen Hover Effect-02 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

3.四隅バラバラ！もっとランダムな角丸変化

マウスを乗せるたびに、毎回違う角の丸みになるインタラクティブな演出。動きに遊び心を加えたいときにぴったりです！

HTMLとCSSは最初に紹介した『1.CSSのみで角丸（共通）＋色変化』と同様です。

JavaScript

const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.addEventListener('mouseenter', () => { //各角の丸みの範囲を変えたい & 全体にランダム感をもっと出したい
    const topLeft = Math.floor(Math.random() * 61) + 10;
    const topRight = Math.floor(Math.random() * 61) + 10;
    const bottomRight = Math.floor(Math.random() * 61) + 10;
    const bottomLeft = Math.floor(Math.random() * 61) + 10;

    box.style.borderRadius = `${topLeft}% ${topRight}% ${bottomRight}% ${bottomLeft}%`;
  });

  box.addEventListener('mouseleave', () => {
    box.style.borderRadius = '0%';
  });
});
調整したい部分編集箇所メモ
各角の丸みの範囲を変えたい各Math.floor()それぞれ数値調整可能
全体にランダム感をもっと出したい%の幅を広げる最小を5、最大を90にするなど

ランダム範囲を変更したい場合

const topLeft = Math.floor(Math.random() * 86) + 5; // 5〜90%

同様に、他の三隅（topRight, bottomRight, bottomLeft）も好きな数値に変更します。

サンプル

See the Pen Hover Effect-03 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

4：画像つきボックス＋動きの組み合わせ

背景に画像を入れて、ホバー時に拡大・半透明・色反転・角丸を同時に実行する高度な演出です。
LPやギャラリーにぴったり！

HTML

<div class="grid-container">
  <div class="box"><img src="hogehoge-image1.jpg" alt="img1"></div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box"><img src="image1.jpg" alt="image1"></div>
  ...
</div>

CSS

.box {
  border: 1px solid #ccc;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.8s ease;
  overflow: hidden;
  position: relative;
  color: #000;
}

.box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /*画像の表示方法を変えたい*/
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.box:hover {
  background-color: #000;
  color: #fff;
}

.box:hover img {
  transform: scale(1.2); /*拡大の度合いを変えたい*/
  opacity: 0.8; /*透け具合を変えたい*/
}
調整したい効果編集する箇所説明
拡大の度合いを変えたいscale(1.2)数値を上げ下げする
透け具合を変えたいopacity: 0.81で非透過、0.5でより透ける
画像の表示方法を変えたいobject-fit: cover;contain, fillなどに変更

JavaScript

const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.addEventListener('mouseenter', () => {
    const topLeft = Math.floor(Math.random() * 61) + 10;
    const topRight = Math.floor(Math.random() * 61) + 10;
    const bottomRight = Math.floor(Math.random() * 61) + 10;
    const bottomLeft = Math.floor(Math.random() * 61) + 10;
    box.style.borderRadius = `${topLeft}% ${topRight}% ${bottomRight}% ${bottomLeft}%`;
  });

  box.addEventListener('mouseleave', () => {
    box.style.borderRadius = '0%';
  });
});

サンプル

See the Pen Hover Effect-04 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

まとめ

今回紹介した4つのパターンは、すべてマウスホバーを使った簡単な視覚演出です。
しかも、それぞれに「どこをどう編集すれば自分好みにできるか」が明確なので、初心者の方でも安心です。

「コピペして動かす」から一歩踏み出して、
「少しだけ自分らしくカスタマイズ」してみましょう！

この演出を応用すれば、カードデザイン・ボタン・画像など、さまざまな要素で活用できます。
ぜひあなたのサイトに取り入れて、訪問者を引き込むデザインに仕上げてみてください！

タイトルとURLをコピーしました