CODEWITHSUNDEEP
htmlcss
mark davies
mark davies

Reputation: 139

Text appearing behind a CSS slideshow

I have used a slide show which I found for my homepage. It works great but when I try to put a paragraph of text after it, it shows higher up behind the slideshow. I'm guessing because the background image in the slider is position: absolute? How to I get my text to appear immediately after the slider regardless of what size screen/device? I can use a load of
tags to push it down but it appears differently for different screen sizes due to the images being a % height.

<div class="pic-wrapper">
    <figure class="pic-1"></figure>
    <figure class="pic-2"></figure>
    <figure class="pic-3"></figure>
    <figure class="pic-4"></figure>
</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<p>This need to appear underneath the slideshow not behind it</p>

CSS...

* {
  margin: 0;
  padding: 0;
}

.pic-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*animation*/
  
  animation: slideShow 24s linear infinite 0s;
  -o-animation: slideShow 24s linear infinite 0s;
  -moz-animation: slideShow 24s linear infinite 0s;
  -webkit-animation: slideShow 24s linear infinite 0s;
}

.pic-1 {
  opacity: 1;
  background: url(images/slider-parmo.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  -moz--animation-delay: 6s;
  -webkit-animation-delay: 6s;
  background: url(images/slider-pizza.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-3 {
  animation-delay: 12s;
  -o-animation-delay: 12s;
  -moz--animation-delay: 12s;
  -webkit-animation-delay: 12s;
  background: url(images/slider-wraps.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-4 {
  animation-delay: 18s;
  -o-animation-delay: 18s;
  -moz--animation-delay: 18s;
  -webkit-animation-delay: 18s;
  background: url(images/slider-burgers.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@keyframes 
slideShow {  0% {
 opacity: 0;
 transform:scale(1);
 -ms-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 transform:scale(1.1);
 -ms-transform:scale(1.1);
}
 100% {
 opacity: 0;
 transform:scale(1);
 -ms-transformm:scale(1);
}
}

@-o-keyframes 
slideShow {  0% {
 opacity: 0;
 -o-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -o-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -o-transformm:scale(1);
}
}

@-moz-keyframes 
slideShow {  0% {
 opacity: 0;
 -moz-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -moz-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -moz-transformm:scale(1);
}
}

@-webkit-keyframes 
slideShow {  0% {
 opacity: 0;
 -webkit-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -webkit-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -webkit-transformm:scale(1);
}
}

Here's my page content CSS..

Upvotes: 0

Views: 222

Answers (1)

Kevin Shuguli
Kevin Shuguli

Reputation: 1749

I think you can do like this.

* {
  margin: 0;
  padding: 0;
}

.pic-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  background-color: lightgreen;
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*animation*/
  
  animation: slideShow 24s linear infinite 0s;
  -o-animation: slideShow 24s linear infinite 0s;
  -moz-animation: slideShow 24s linear infinite 0s;
  -webkit-animation: slideShow 24s linear infinite 0s;
}

.pic-1 {
  opacity: 1;
  background: url(images/slider-parmo.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  -moz--animation-delay: 6s;
  -webkit-animation-delay: 6s;
  background: url(images/slider-pizza.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-3 {
  animation-delay: 12s;
  -o-animation-delay: 12s;
  -moz--animation-delay: 12s;
  -webkit-animation-delay: 12s;
  background: url(images/slider-wraps.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-4 {
  animation-delay: 18s;
  -o-animation-delay: 18s;
  -moz--animation-delay: 18s;
  -webkit-animation-delay: 18s;
  background: url(images/slider-burgers.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@keyframes 
slideShow {  0% {
 opacity: 0;
 transform:scale(1);
 -ms-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 transform:scale(1.1);
 -ms-transform:scale(1.1);
}
 100% {
 opacity: 0;
 transform:scale(1);
 -ms-transformm:scale(1);
}
}

@-o-keyframes 
slideShow {  0% {
 opacity: 0;
 -o-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -o-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -o-transformm:scale(1);
}
}

@-moz-keyframes 
slideShow {  0% {
 opacity: 0;
 -moz-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -moz-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -moz-transformm:scale(1);
}
}

@-webkit-keyframes 
slideShow {  0% {
 opacity: 0;
 -webkit-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -webkit-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -webkit-transformm:scale(1);
}
}
<div class="pic-wrapper">
    <figure class="pic-1"></figure>
    <figure class="pic-2"></figure>
    <figure class="pic-3"></figure>
    <figure class="pic-4"></figure>
</div>



<p>This need to appear underneath the slideshow not behind it</p>

Upvotes: 1

Related Questions