TotalNFL TotalNFL - 5 months ago 9
CSS Question

Text Disappearing When Using Background Image Slideshow

Okay, there probably is a question out there like this, but I couldn't find anything on the first 10 pages of Google. So, I'm creating a background slideshow for my website, and I have 6 images in the slideshow.

My problem is that I can't stop my text from disappearing when each transition is made. Here's my code:

HTML

<ul class="bg-slideshow">
<li>
<span>Image 1</span>
<div>
</div>
</li>
<li>
<span>Image 2</span>
<div>
</div>
</li>
<li>
<span>Image 3</span>
<div>
</div>
</li>
<li>
<span>Image 4</span>
<div>
</div>
</li>
<li>
<span>Image 5</span>
<div>
</div>
</li>
<li>
<span>Image 6</span>
<div>
</div>
</li>




CSS

.bg-slideshow,
.bg-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}

.bg-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: black;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}

.bg-slideshow li:nth-child(1) span {
background-image: url("image2.png")
}
.bg-slideshow li:nth-child(2) span {
background-image: url("image2.png");
animation-delay: 6s;
}
.bg-slideshow li:nth-child(3) span {
background-image: url("image3.png");
animation-delay: 12s;
}
.bg-slideshow li:nth-child(4) span {
background-image: url("image4.png");
animation-delay: 18s;
}
.bg-slideshow li:nth-child(5) span {
background-image: url("image5.png");
animation-delay: 24s;
}
.bg-slideshow li:nth-child(6) span {
background-image: url("image6.png");
animation-delay: 30s;
}

.bg-slideshow li:nth-child(2) div {
animation-delay: 6s;
}
.bg-slideshow li:nth-child(3) div {
animation-delay: 12s;
}
.bg-slideshow li:nth-child(4) div {
animation-delay: 18s;
}
.bg-slideshow li:nth-child(5) div {
animation-delay: 24s;
}
.bg-slideshow li:nth-child(6) div {
animation-delay: 30s;
}

.bg-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 36s linear infinite 0s;
}

@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 0; animation-timing-function: ease-out; }
17% { opacity: 0 }
25% { opacity: 0 }
100% { opacity: 0 }
}

@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 0 }
17% { opacity: 0 }
19% { opacity: 0 }
100% { opacity: 0 }
}

.no-cssanimations .bg-slideshow li span {
opacity: 1;
}

@media screen and (max-width: 1140px) {
.bg-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.bg-slideshow li div h3 { font-size: 80px }
}

@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% {
opacity: 0
}

@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}


What am I missing? I've gone over this again and again. (And again.) Thanks!

JSFiddle

Picture Of Problem

Answer

I think you just need to add positioning/a z-index to the containers you want to appear over your slideshow, like so:

.welcome, .category_1, .category_2, .category_3{
  position: relative;
  z-index: 1;
}

https://jsfiddle.net/will0220/21f7ecf3/