CSSのみでメイン画像をスライドショーで見せたい

Question

###前提・実現したいこと
CSSのみでスライドショーを実現させたいのですが、うまく行きません。
何がうまくいかない原因なのかを教えていただきたいです。

 <div class="mainPhoto">
		 <p>違<span>いのわかる</span>大人<span>の</span>ヘアサロン</p>
		 <div class="mainshow">
    <img src="<?php echo get_template_directory_uri(); ?>/img/main2.jpg" width="960" height="457" alt="" class="slideA"/>
    <img src="<?php echo get_template_directory_uri(); ?>/img/main_2.jpg" width="960" height="457" alt="" class="slideB"/>
		</div>
		</div>

main .mainPhoto{
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
	max-width: 960px;
	position: relative;
}
.mainshow {
	position:relative;
}
.mainshow img {
	animation-name: album;
	-webkit-animation-name: album;
	animation-duration: 10s;
	-webkit-animation-duration: 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
}
.mainshow .slideA {
	display: block;
	margin: 0 auto;
}
.mainshow .slideB {
	position: absolute;
	top: 0;
}

@keyframes album {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	}
	
.mainshow img {
	animation-name: album;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	opacity: 0;
}

.mainshow .slide2 {
	animation-delay:5s;
}

Answer 1

.mainshow .slideB {
    animation-delay:5s;
}

---

追記：

.mainshow .slideB {
    animation-delay:5s;
}
.mainPhoto p {
    z-index: 1;
}
```**動くサンプル：**[https://jsfiddle.net/dwz53pcf/](https://jsfiddle.net/dwz53pcf/)

Comments

[ryota0315]

テキストも合わせてスライドさせたいのですが、頂いたコードを打ち込んでも実現できませんでした。

[kei344]

質問文にテキストがありませんが･･･。

[ryota0315]

<p>違<span>いのわかる</span>大人<span>の</span>ヘアサロン</p>
このテキストを画像の上に載せております。

main .mainPhoto{
display: block;
margin: 0 auto;
width: 100%;
height: auto;
max-width: 960px;
position: relative;
}
.mainPhoto p {
display: inline-block;
position: absolute;
top: 20px;
left: 20px;
font-family:"Tsukushi A Round Gothic","筑紫A丸ゴシック";
font-weight:lighter;
font-size: 3.6rem;
text-shadow:
0 0 5px #edf8ff,
0 0 10px #edf8ff,
0 0 15px #edf8ff,
0 0 20px #edf8ff,
0 0 25px #edf8ff,
0 0 30px #edf8ff,
0 0 35px #edf8ff,
0 0 40px #edf8ff,
0 0 45px #edf8ff,
0 0 50px #edf8ff;
}
.mainPhoto span {
font-size: 2.0rem;
}

[kei344]

テキストが1つしかないのに何をどうスライドさせるのでしょうか。質問文を編集してもう少し具体的に書いてください。

[ryota0315]

slideAとslideBの画像をスライドショーで表示しながら、先程のテキストを画像の上に常に表示させるような仕様としたいです。
そもそもHTMLの書き方が間違っているのでしょうか？

[ryota0315]

実現できました！
ありがとうございます！
可能でしたら、画像が切り替わるタイミングでテキストも同じように切り替わっているように見せる見せ方はありますでしょうか？

[kei344]

あります。

[ryota0315]

もし可能でしたら実現方法を教えて頂けるとうれしいです。

[kei344]

.slideA/.slideBをdivとかにすればいいのでは？
やってみてわからないところは新たに質問してください。

[ryota0315]

ありがとうございました！
的確に教えて頂きありがとうございました。