CSS動畫：如何為每個圖像使用偽元素放置文本？

Question

我目前有4張圖片，我使用CSS動畫每隔X秒顯示一張不同的圖片。 問題是我想為每個圖像放置一個唯一的文本。 例如，對於第一個圖像，“第一圖像”，對於第二個圖像，“第二圖像”，等等。

這是我的HTML代碼：

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

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

結果： http : //screencast.com/t/WPcf8X2b7z

因此，對於每個圖像，中間都有一個文本。 我想我可以用：before或：after做到這一點，但是我確實找到了解決方案。

感謝那些會努力幫助我的人。

Answer 1

檢查一下：

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>

在div中移動圖像和文本，並添加動畫