重ね画像の上にボタンのアニメーションを設定したがうまくいかない。

Question

前提・実現したいこと

ボタンの後ろでアニメーションをブワンブワンさせたいのですが、どうもブワンブワンするアニメーションが隠れてしまいます。
z-indexで上にもってこようとすると、ボタンの前に来てしまいます。
index-1まではブワンブワンが表示されない。
0以上にするとボタンの上にブワンブワンが来ます。

重ね順番としては、背景の上にabsoluteとrelativeで画像とボタンを重ねます。

ボタン単体でコード書くとうまくいくのですが、何か引っかかっているのでしょうか。
コードでボタンを書いても、画像でボタンを作っても改善されません。

該当のソースコード

	<div class="relative">
	<div class="absolute">
	<div class="box0">
	<img src="img/txt1_2_pc.png" class="resize pc">
	<img src="img/txt1_2.png" class="resize sp">
		</div>
	<br>
		<div class="blink"><a href="#form"><img src="img/button.png" class="resize btn_front"></a></div>
		
	</div>
	<img src="img/parts6.png" class="resize pc">
		<img src="img/parts6_sp.png" class="resize sp">
	</div>	

---

@keyframes anime{
0%{transform:scale(.95); opacity:1}
90%{opacity:.1}to{transform:scale(1.2,1.5); opacity:0}
}

.blink {
position: relative;
width: 70%;
margin: 100px auto;
transition: .2s;
}
.blink:before, .blink:after {
content: "";
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
top: 3px;
left: 0;
border-radius: 4px;
background: #765903;
border: 1px solid #765903;
transform: translate3d(0,0,0);
}
.blink:before {
animation: anime 2s ease-out infinite;
}
.blink:after {
animation: anime 2s ease-out 1s infinite;
}

.btn_front {
z-index: 200 !important;
}

Comments

[yambejp]

「ブワンブワンするアニメーション」の例をどこかでみられませんか？

[ches]

https://digitalidentity.co.jp/blog/creative/animation-cv-button.html

こちらです。

Answer 1

ボタンをテキストベースにも変えられるよう
.btn_front は img ではなく a にかけます

<a href="#form" class="btn_front"><img src="img/button.png" class="resize"></a>

z-index は static以外の position にしか反応しませんので
.btn_front にも position をかけます。

.btn_front {
    position: relative;
    display: block;
    width: 100%;
    z-index: 20;
}     

これで動くと思います^^

※コードは、<code> でコードペインに入れられます。
質問の際は html と css を分けてコードペインに入れるようにしてくださいm(__)m

Comments

[ches]

いけましたーーー！ありがとうございます！

[ches]

詳しく有難うございます！勉強になりましたし、今後codeで書き込みます。

[ches]

困ってたので助かりました

Answer 2

もとのソースと明らかに違うのは

.blink:before, .blink:after {

が「z-index: 10;」となっていますが、オリジナルは「-10」

Comments

[ches]

ご回答ありがとうございました！お心感謝いたします！