a:hover 時にテキストが表示されません。

質問

コード初心者です。
コピペしたものを若干数字を変えて使用しようとしましたが、テキストが表示されません。他の解説をみましたが、自分との違いがよく分からないため質問させていただきました。
以下htmlとcssを記載しますので、どなたかご教授いただけないでしょうか・・・・。

html
<a href="#" class="button">
<section id="news">
<h2>お知らせ</h2>
<p>
9月10日㈭　遊びに来てね！！
</p>
</section>
</a>

css

#news{
width: 100%;
height: 180px;
margin: 0px auto 50px;
border-radius: 10px;
background-color: rgb(204, 160, 160);
}

.button{
position: relative;
display: block;
width: 90%;
margin: 0 auto;
transition: .3s;
color: rgb(41, 35, 35);
}
.button:hover{
color: aliceblue;

}

.button::before {
position: absolute;
width: 100%;
height: 180px;
border-radius: 10px;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: '';
background: rgb(37, 59, 26);
transform-origin: right top;
transform: scale(0, 1);
transition: transform .2s;

}
.button:hover::before {
transform-origin: left top;
transform: scale(1, 1);
color: ghostwhite;
}

宜しくお願い致します！！！！

回答No.3

media-k · ベストアンサー

beforeがh2タグとpタグを覆い被せるように上に広がっちゃうので、見えなくなっちゃうって感じですね。
h2とpをbeforeより上位にするという手もありかと。

h2, p {
position: relative;
z-index: 9999;
}

お礼

再度のご返信を有難う御座います！

出来ました！！！！
文字は黒いままですが、ちゃんと表示されました。

本当に感謝です。
お忙しい中お付き合いくださり、
本当に有難うございました！

(*´ω｀*)

回答No.2

t_ohta

＞　文字の白指定はほかのサイトなどを調べ、見よう見まねで付け加えてみましたが全くうまく行きません・・・。

参考にしているサイトのCSSでは .button::before の z-index は -1 とbuttonクラス要素の背後に濃い背景の要素を追加しているので、文字の下に濃い背景が表示されます。
質問者さんのCSSでは z-index: 1; と濃い背景の要素が上に乗るので文字が隠れています。
また、この方法で色を変えるときはbuttonクラス要素及びその子要素は背景が透明でないと濃い背景の要素が透けて見えないので、news ID要素に背景色を指定すると、ポインタが上に乗っても濃い背景の要素が透けて見えないので背景が変わって見えません。

HTMLの各要素の重なりをしっかり理解できれば判るようになると思います。

回答No.1

t_ohta

buttonクラスの要素に .button::before で作った要素を上に重ねて transform: scale(0, 1); でX方向倍率0倍で隠しています。

.button:hover::before で transform: scale(1, 1); としてX方向倍率が1倍になっているので、カーソルが上に乗ると隠れていたモノが表示されます。
この時表示される要素はbuttonクラスの要素の上に重なっている（z-index: 1;）ので、buttonクラスの要素内に書かれている「お知らせ」とか「9月10日㈭　遊びに来てね！！」という文字は見えなくなります。

どういう動作を想定されているのか判りませんが、CSSで指定した通りの動作をしています。

補足

ご回答を有難う御座います。

仰る通り、ホバーで「お知らせ」が見えなくなる状況なのですが、掲載元ではホバーするとホバー前に表示されていた文字が白くなって表示されてます。

私もそれを期待してコピペしたのですが、私の場合ホバーで隠れたまま文字が表示されないので、何処が間違っているのか分からず・・・。

.button:hover::before {
transform-origin: left top;
transform: scale(1, 1);
color: ghostwhite;
}

文字の白指定はほかのサイトなどを調べ、見よう見まねで付け加えてみましたが全くうまく行きません・・・。

参考にさせていただいたサイト
https://www.nxworld.net/10-css-hover-fill-animation.html

多分私の理解が追い付いていないのが原因なのですが、先に進めず困っています。何度もお手間を取らせて申し訳ありませんが、お手隙でご指南いただけますでしょうか？

宜しくお願い致します。