How to put text over CSS image carousel?


Tags: css,image,html,slideshow,carousel

Problem :

<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.



Solution :

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;
}

    CSS Howto..

    How to keep Fixed position navigation static positioned when resizing window

    3 column layout, same height, middle column full size. How to do it without “table-cell”

    How to override default Polymer CSS

    How to remove href attributes from a tag and remove css associated to it in iframe using jquery

    How to remove white border from blur background image

    How do you explain this div spacing issue?

    CSS Shadows (how to get rid of top shadow?)

    How to best format an HTML form like this where user can dynamically add subfields? (table? list? css3?)

    How to correctly apply a CSS style to all the images in a div having a specific class?

    How to hide and show div border line in my case?

    How to stop text from vertically centering in a table?

    CSS/HTML menu not showing correctly

    How to add a class to a bar using jQuery?

    How can I force CQ5.5 to ignore CSS data-uri-schemes?

    How to move object into the screen from outside via jQuery transition

    how to show a portion of image like on 9gag.com

    How do I make a div link open in a new tab Javascript onClick="window.location

    How to add a Delay on Bootstrap Dropdown Hover

    How to Vertically Center Images on a Line?

    How to style the values in a textfield using CSS?

    how to reference background image urls in css through config entrys

    How to make a simple plus one voting system in code igniter

    How can i make my paragraph go to the next line after a certain width

    How to change default value in counter-increment?

    How to apply jQuery on css selector :before [duplicate]

    How to use css linear gradients in IE10?

    Dynamically loaded thumbnail image shows other thumbnails full size image instead of its own (using javascript hover over effect)

    How to make font size independent of screen resolution and monitor size?

    How to use display:flex in CSS to create a mix of fixed with and dynamic proportional width columns?

    How to find which CSS files are used for current page