ホバーで入れ替わるCSS吹き出しのテキストが重ならない

前提・実現したいこと

CSSで作った吹き出し内テキストを、ホバーすることによって"クリック"から"説明文"に入れ替えるコードを作っていたのですが、その吹き出しに枠線をつけたらテキストが重ならずに縦に並んでしまいました。

発生している問題・エラーメッセージ

ホバーで入れ替わるという点は問題ありません。
ホバー後のテキストは隠れているのですが、要素だけがホバー前のテキストの下に来てしまっていて、吹き出しの下半分に大きな余白があるみたいに見えます。(ホバー後は逆に上半分に余白)
ホバー前と後のテキストを重ねたいのですが、上手くいきません。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>

<style type="text/css">

.balloon1 {
	position: relative;
	display: inline-block;
	margin-top: 100px;
	margin-left: 50px;
	padding: 10px 10px;
	min-width: 120px;
	max-width: 100%;
	line-height: 100px;
	max-height: 100%;
	color: #555;
	background: #fff;
	border-radius: 30px;
	text-align: center;
	border: solid 3px #000000;
	transition: 1s;
	-webkit-transition: 1s;
	transform-origin: bottom;
}
			
.balloon1:before{
	content: "";
	position: absolute;
	top: 99%;
	left: 30%;
 	margin-left: -15px;
	border: 12px solid transparent;
	border-top: 12px solid #fff;
	z-index: 2;
}

.balloon1::after {
  display: block;
  content: "";
  padding-top: 100%;
  position: absolute;
  bottom: -30px;
  top: 100%;
  left: 30%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #000000;
  z-index: 1;
}

.balloon1 p {
    position: relative;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	color:#d36a15;
}

.balloon1:hover{
 transform: scale(2);
 font-size: 7px;
}
			
.first,
.second {
 width: 100%;
 position: absolute; 
 top: 0;
 left: 0;
}

.first {
 opacity: 1; 
 font-size: 16px;
}
.second {
 position: absolute;
 opacity: 0; 
}
.balloon1:hover .first { 
 opacity: 0;
}
.balloon1:hover .second { 
 opacity: 1;
}

</style>

</head>
<body>

<div class="balloon1" ontouchstart="">
    <p class="first"><span>クリック</span></p>
    <p class="second"><span>詳細文</span></p>
  </div>

</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

これでどうでしょ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>

<style type="text/css">

.balloon1 {
    position: relative;
    display: inline-block;
    margin-top: 100px;
    margin-left: 50px;
    padding: 10px 10px;
    min-width: 120px;
    max-width: 100%;
    line-height: 100px;
    max-height: 100%;
    color: #555;
    background: #fff;
    border-radius: 30px;
    text-align: center;
    border: solid 3px #000000;
    transition: 1s;
    -webkit-transition: 1s;
    transform-origin: bottom;
}

.balloon1:before{
    content: "";
    position: absolute;
    top: 99%;
    left: 30%;
     margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #fff;
    z-index: 2;
}

.balloon1::after {
  display: block;
  content: "";
  padding-top: 100%;
  position: absolute;
  bottom: -30px;
  top: 100%;
  left: 30%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #000000;
  z-index: 1;
}

.balloon1 p {
    position: relative;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    color:#d36a15;
}

.balloon1:hover{
 transform: scale(2);
 font-size: 7px;
}

.first,
.second {
 width: 100%;
 position: absolute; 
 top: 0;
 left: 0;
}

.first {
 opacity: 1; 
 font-size: 16px;
}
.second {
 position: absolute;
 opacity: 0; 
}
.balloon1:hover .first { 
 opacity: 0;
}
.balloon1:hover .second { 
 opacity: 1;
}

</style>

</head>
<body>

<div class="balloon1" ontouchstart="">
    <p class="first"><span>クリック</span></p>
    <p class="second" style="position: absolute;"><span>詳細文</span></p>
  </div>

</body>
</html>

投稿2019/01/10 14:10