AmericanAlien AmericanAlien - 2 months ago 24
CSS Question

How to put text over CSS image carousel?

<div class="carousel colorDissolve">
<img class="item" src="car.jpg" />
<img class="item" src="plane.jpg" />
<img class="item" src="train.jpg"/>
<img class="item" src="boat.jpg" />
</div>

/* colorDissolve */
.colorDissolve {
position: relative;
overflow: hidden;
width: 287px;
height: 430px;
background: #000000;
}
.colorDissolve .item {
position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: colorDissolve 24s linear infinite;
-moz-animation: colorDissolve 24s linear infinite;
-ms-animation: colorDissolve 24s linear infinite;
animation: colorDissolve 24s linear infinite;
}
.colorDissolve .item:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.colorDissolve .item:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.colorDissolve .item:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}

@-webkit-keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
@-moz-keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
@-ms-keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
@keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}


I cannot seem to get text OVER images this carousel. If I used a button slider, I can, but I just cannot seem to do it this way. It feels like I am not getting the div structure right. I tried to div each slide, but the text shows on the first slide from every div. Any guidance would be appreciated. I need different text over each slide when it appears, but I cannot get it to structurally work.

Answer

JS fiddle DEMO

modified your markup a little

<div class="carousel colorDissolve">
    <div class="item">
    <img  src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTGNBB_xiix1HdkfCW1OG8NmMqbU23KUIXKE1HuK3RW3UBV_smc" />
    <span>Picture Car from Google.com</span>
    </div>
      <div class="item">
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRMj84NfnxY3l_GbZFFUvmBI3Zg_tPjPutlomjfiU0TyPJFG3O1" />
     <span>Picture Plane  from Google.com</span>
            </div>
      <div class="item">
    <img  src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_i3dd7B8UkOKEaI4bVBmpyld_5JkZWbwC8vObZiw6PxUTSl53"/>
            <span>This is train</span>
            </div>
      <div class="item">
    <img  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZT3h9jLlg7yC3RNr8rg8l2JlurpXkJX1MXRrwh9eYI9BMJD316w" />
            <span>This is boatm</span>
            </div>

</div>

Added styling to span

span{
position:absolute;
    top:0px;
    left:0px;
    color:#c30;
    font-size:2em;
    -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}
Comments