【CSS】マウスホバー時にバルーンポップアップ

CSSCSSデザイン, CSSアニメーション

CSSだけでマウスホバー時にバルーンポップアップを表示するサンプルです

マウスホバー時にバルーンポップアップ

マウスホバーとCSSアニメーションを使ったシンプルなタイプです

See the Pen CSS Balloon Popup by yochans (@yochans) on CodePen.

HTML

<p class="text">マウスホバー
<span class="description">説明文</span>
</p>

CSS

.text{
  margin:50px;
  position: relative;
}

.description{
  position: absolute;
  top: -3.5em;
  left: -10px;
  padding: 6px;
  background-color: #01579B;
  color:#FFF;
  border-radius:6px;
  opacity:0;
}

.text:hover .description{
  animation: popup 1s forwards;
}

@keyframes popup {
  100% {
  opacity:1;
  }
}

バルーンの部分は「position: absolute;」でポジションを指定しています

「opacity」で透過をして通常は見えない状態に、マウスホバー時にアニメーションで透過度を変更しています

マウスホバー時にバルーンポップアップ2

バルーンらしく吹き出しの突起を付けてたタイプです

See the Pen CSS Balloon Popup2 by yochans (@yochans) on CodePen.

 

HTML

<p class="text">マウスホバー
<span class="description">説明文</span>
</p>

CSS

.text{
  margin:50px;
  position: relative;
}

.description{
  position: absolute;
  top: -3.5em;
  left: -10px;
  padding: 6px;
  background-color: #01579B;
  color:#FFF;
  border-radius:6px;
  opacity:0;
}

.description:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10px;
  border: 0.4em solid transparent;
  border-top: 1em solid #01579B;
}

.text:hover .description{
  animation: popup 1s forwards;
}

@keyframes popup {
  100% {
  opacity:1;
  }
}

.descriptionに擬似要素:afterを使って、突起部分を作成しています