【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を使って、突起部分を作成しています
ディスカッション
ピンバック & トラックバック一覧
[…] 参照サイト:https://naruhodo.repop.jp/css-balloon-popup/ @keyframesについて:https://qiita.com/7968/items/1d999354e00db53bcbd8 […]