文字の画像(イメージ)化

cman.jp > パーツ作成メニュー > 吹き出しのデザイン > マウスが乗ると吹き出しを表示

マウスが要素に乗ったとき吹き出しを表示

テキストや画像にマウスが乗ったときに吹き出しを表示させることができます。

当ページでは簡単操作で吹き出しをいろいろな位置に表示させることが出来ます。
生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

いろいろな位置に吹き出しを表示してみよう

吹き出しの作成については以下をご確認ください。
CSSのみで吹き出しを作成

吹き出しの表示位置

左上右下

背景の色

他▶

透明度

マウスを乗せてください吹き出しが表示される

使用したhtml

<div class="balloonoya">マウスを乗せてください
  <span class="balloon">吹き出しが表示される></span>
</div>

生成したCSS

.balloon {
  position: relative;                   /* 指定した分だけ相対的に移動 */
  padding: 10px;                        /* テキストの前後の余白 */
  background-color: rgba(102, 102, 255, 0.50);  /* 背景色（透明度） */
  width:300px;                          /* 吹き出し全体の幅 */
  left : 50%;                           /* 表示位置 */
  transform: translate(-50%);           /* 表示位置の調整 */
}
.balloon:after{
  border-right: 20px solid rgba(102, 102, 255, 0.50);  /* 吹き出し口の幅・色 */
  border-top: 10px solid transparent;     /* 吹き出し口の高さ１／２ */
  border-bottom: 10px solid transparent;  /* 吹き出し口の高さ１／２ */
  left: -20px;                            /* 吹き出し口の位置調整 */
  top : 50%;                         /* 吹き出し口の縦位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}

広告

広告

マウスオーバーで吹き出しを表示の例

吹き出しはいろいろな方法で表示できます。

マウスオーバーで回転して吹き出しを表示

マウスを乗せてください吹き出しが表示される

<div class="sample1Oya">マウスを乗せてください
  <span class="sample1">吹き出しが表示される</span>
</div>

<style type="text/css">
.sample1oya {
  position: relative;                  /* 指定した分だけ相対的に移動 */
}
.sample1oya:hover .sample1 {
  display: inline;                     /* インライン要素として表示 */
}
 /* --- 吹き出し ------------------ */
.sample1 {
  display: none;                        /* 要素を非表示 */
  position: absolute;                   /* 親要素を基準 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(255, 102, 255, 0.50);  /* 背景色（透明度） */
  width: 180px;                         /* 吹き出し全体の幅 */
  left : -1%;                           /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  animation: sample1Anime 1s linear;
}
.sample1:after{
  border-left: 12px solid rgba(255, 102, 255, 0.50);  /* 吹き出し口の幅・色 */
  border-bottom: 10px solid transparent;  /* 吹き出し口の高さ１／２ */
  border-top: 10px solid transparent;     /* 吹き出し口の高さ１／２ */
  right: -12px;                           /* 吹き出し口の位置調整 */
  top : 5%;                               /* 吹き出し口の縦位置 */
  content: "";                            /* コンテンツの挿入 */
  position: absolute;                     /* 親要素を基準 */
}
@keyframes sample1Anime{
 100% { transform: rotate(360deg); }      /* 回転を指定 */
}
</style>

マウスオーバーでゆっくり吹き出しを表示

マウスを乗せてください吹き出しが表示される

<div class="sample2Oya">マウスを乗せてください
  <span class="sample2">吹き出しが表示される</span>
</div>

<style type="text/css">
.sample2oya {
  position: relative;                  /* 指定した分だけ相対的に移動 */
}
.sample2oya:hover .sample2 {
  display: inline;                     /* インライン要素として表示 */
}
 /* --- 吹き出し ------------------ */
.sample2 {
  display: none;                        /* 要素を非表示 */
  position: absolute;                   /* 親要素を基準 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(255, 127, 127, 0.75);  /* 背景色（透明度） */
  width:180px;                          /* 吹き出し全体の幅 */
  left : 30%;                           /* 表示位置 */
  top : 100%;                           /* 表示位置 */
  margin-top : 12px;                    /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  animation: sample2Anime 1s linear;
}
.sample2:after{
  border-bottom: 12px solid rgba(255, 127, 127, 0.75);  /* 吹き出し口の高さ・色 */
  border-left: 10px solid transparent;   /* 吹き出し口の幅１／２ */
  border-right: 10px solid transparent;  /* 吹き出し口の幅１／２ */
  top: -12px;                            /* 吹き出し口の位置調整 */
  left : 5%;                         /* 吹き出し口の横位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}
@keyframes sample2Anime{
 100%{ color : black; background:rgba(255, 127, 127, 0.75) }
  50%{ color : black; background:rgba(255, 127, 127, 0.25) }
   0%{ color : white; background:white   }
}
</style>

マウスオーバーで横回転して吹き出しを表示

マウスを乗せてください吹き出しが表示される

<div class="sample3Oya">マウスを乗せてください
  <span class="sample3">吹き出しが表示される</span>
</div>

<style type="text/css">
.sample3oya {
  position: relative;                  /* 指定した分だけ相対的に移動 */
}
.sample3oya:hover .sample3 {
  display: inline;                     /* インライン要素として表示 */
}
 /* --- 吹き出し ------------------ */
.sample3 {
  display: none;                       /* 要素を非表示 */
  position: absolute;                  /* 親要素を基準 */
  padding: 2px;                        /* テキストの前後の余白 */
  background-color: rgba(127, 127, 0, 0.75);  /* 背景色（透明度） */
  width:180px;                         /* 吹き出し全体の幅 */
  right : -1%;                         /* 表示位置 */
  font-size: 80%;                      /* 文字サイズ */
  animation: sample3Anime 1s linear;
}
.sample3:after{
  border-right: 12px solid rgba(127, 127, 0, 0.75);  /* 吹き出し口の高さ・色 */
  border-bottom: 10px solid transparent; /* 吹き出し口の幅１／２ */
  border-top: 10px solid transparent;    /* 吹き出し口の幅１／２ */
  left: -12px;                           /* 吹き出し口の位置調整 */
  top : 5%;                              /* 吹き出し口の横位置 */
  content: "";                           /* コンテンツの挿入 */
  position: absolute;                    /* 親要素を基準 */
}
@keyframes sample3Anime{
 100% { transform: rotateY(360deg); }  /* 横回転を指定 */
}
</style>

マウスオーバーで縦回転して吹き出しを表示

マウスを乗せてください吹き出しが表示される

<div class="sample4Oya">マウスを乗せてください
  <span class="sample4">吹き出しが表示される</span>
</div>

<style type="text/css">
.sample4oya {
  position   : relative;               /* 指定した分だけ相対的に移動 */
}
.sample4oya:hover .sample4 {
  display: inline;                     /* インライン要素として表示 */
}
 /* --- 吹き出し ------------------ */
.sample4 {
  display: none;                        /* 要素を非表示 */
  position: absolute;                   /* 親要素を基準 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(102, 255, 102, 0.75);  /* 背景色（透明度） */
  width:180px;                          /* 吹き出し全体の幅 */
  left : 30%;                           /* 表示位置 */
  bottom : 100%;                        /* 表示位置 */
  margin-bottom : 12px;                 /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  animation: sample4Anime 1s linear;
}
.sample4:after{
  border-top: 12px solid rgba(102, 255, 102, 0.75);  /* 吹き出し口の高さ・色 */
  border-left: 10px solid transparent;   /* 吹き出し口の幅１／２ */
  border-right: 10px solid transparent;  /* 吹き出し口の幅１／２ */
  bottom: -12px;                         /* 吹き出し口の位置調整 */
  left : 5%;                             /* 吹き出し口の横位置 */
  content: "";                           /* コンテンツの挿入 */
  position: absolute;                    /* 親要素を基準 */
}
@keyframes sample4Anime{
 100% { transform: rotateX(360deg); }   /* 縦回転を指定 */
}
</style>

注意事項

当ページの吹き出しは、CSSのみで作成しています。

広告

生成できるホームページ・パーツ一覧
	文字のデザイン
	画像のデザイン
	ボタンのデザイン
	入力項目のデザイン
	テーブルのデザイン
	BOXのデザイン
	吹き出しのデザイン
	ページのデザイン
	図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
	何で無料なの？
	生成コードに利用制限はある？
	生成コードに保証はある？
	jQueryで生成できない？

広告

当サイト内の関連するページ

便利なCSS、JavaScriptの自動生成一覧

CSS吹き出し

マウスオンで
吹き出し吹き出し

マウス吹き出し

クリックで
吹き出し吹き出し

click吹き出し

星(★)の採点

ランク１
ランク２
ランク３

ランキング表示

SVG吹き出し

広告

QrCode

このページのURL

当サイトについてお問い合わせよくあるご質問

cman.jp サーバ監視【無料】 QRコード作成【無料】画像加工【無料】 htaccess作成【無料】 WEB便利ノート【無料】 IT比較実験【無料】アイコン素材【無料】 WEBページ作成リファレンス【無料】文字/ボタンのイメージ画像作成【無料】

スマートフォン・タブレット

運営:株式会社シーマン