CSS动画：如何为每个图像使用伪元素放置文本？

Question

I currently have 4 images and I use the CSS animation to reveal a different picture every X seconds. The problem is that I'd like to put an unique text for each image. For example, for the first image, "First Image", for the second, "Second Image", etc.

Here is my HTML code:

    <div class="wrapper">
    <div id="container">
        <h1 id="all-available-styles">All available styles</h1>
        <div id="all-available-styles-block">
            <img src="images/test.jpg" alt="">
            <img src="images/test2.jpg" alt="">
            <img src="images/test3.jpg" alt="">
            <img src="images/test4.jpg" alt="">
        </div>
    </div>
</div>

My CSS:

#welcome-to
{
    text-align: center;
    margin: 0 auto 15px auto;
    width: 75%;
}

#all-available-styles
{
    text-align: center;
    margin-bottom: 25px;
}

#all-available-styles:before, #all-available-styles:after
{
    content: "\f122";
    display: inline-block;
    position: relative;
    top: 10px;
}

#all-available-styles:before
{
    transform: rotate(250deg);
    -webkit-transform: rotate(250deg);
    -ms-transform: rotate(250deg);
    -moz-transform: rotate(250deg);
    margin-right: 5px;
}

#all-available-styles:after
{
    margin-left: 5px;
    transform: rotate(100deg) scaleX(-1);
    -webkit-transform: rotate(100deg) scaleX(-1);
    -ms-transform: rotate(100deg) scaleX(-1);
    -moz-transform: rotate(100deg) scaleX(-1);
}

#all-available-styles-block
{
    position: relative;
    height: 281px;
}

#all-available-styles-block img
{
    background-color: #FFFFFF;
    margin: 0 auto;
    padding: 2px;
    position: absolute;
    right: 0;
    left: 0;
    animation: allAvailableStylesBlockFadeInOut ease-in-out infinite 8s;
    -webkit-animation: allAvailableStylesBlockFadeInOut ease-in-out infinite 8s;
    box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
    -webkit-box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
    width: 50%;
    pointer-events: none;
}

@keyframes allAvailableStylesBlockFadeInOut
{
    0%
    {
        opacity: 1;
    }

    17%
    {
        opacity: 1;
    }

    25%
    {
        opacity: 0;
    }

    92%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 1;
    }
}

@-webkit-keyframes allAvailableStylesBlockFadeInOut
{
    0%
    {
        opacity: 1;
    }

    17%
    {
        opacity: 1;
    }

    25%
    {
        opacity: 0;
    }

    92%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 1;
    }
}

@-moz-keyframes allAvailableStylesBlockFadeInOut
{
    0%
    {
        opacity: 1;
    }

    17%
    {
        opacity: 1;
    }

    25%
    {
        opacity: 0;
    }

    92%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 1;
    }
}

@-o-keyframes allAvailableStylesBlockFadeInOut
{
    0%
    {
        opacity: 1;
    }

    17%
    {
        opacity: 1;
    }

    25%
    {
        opacity: 0;
    }

    92%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 1;
    }
}

#all-available-styles-block img:nth-of-type(1)
{
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
}

#all-available-styles-block img:nth-of-type(2)
{
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
}

#all-available-styles-block img:nth-of-type(3)
{
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
}

#all-available-styles-block img:nth-of-type(4)
{
    animation-delay: 0;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -o-animation-delay: 0;
}

Result: http://screencast.com/t/WPcf8X2b7z

So for each image, a text in the middle. I think I can do it with a :before or :after, but I did find the solution.

Thanks to people who will try to help me.

Answer 1

Check this:

http://jsfiddle.net/DariuszMusielak/qzrrqryd/

   <div class="wrapper">
    <div id="container">
        <h1 id="all-available-styles">All available styles</h1>
        <div id="all-available-styles-block">
            <div class='image'>
                <img src="http://marcisischo.com/wp-content/uploads/2014/12/TrollFace.png" alt="">
                <p> nice troll face 1</p>
            </div>
            <div class='image'>
                <img src="http://img4.wikia.nocookie.net/__cb20130116153004/uncyclopedia/images/c/cb/Internet-troll-face-explorer.png" alt="">
                <p> nice troll face 2</p>
            </div>
            <div class='image'>
                <img src="http://www.clipartbest.com/cliparts/dT6/MEb/dT6MEbgEc.gif" alt="">
                <p> nice troll face 3</p>
            </div>
            <div class='image'>
               <img src="http://fc02.deviantart.net/fs70/f/2011/074/f/f/kirby_troll_face_by_arashi93_sama-d3bqrxs.jpg" alt="">
               <p> nice troll face 4</p>
            </div>
        </div>
    </div>
</div>

Move images and text inside div, and add anima