html - CSS 动画 : How can I put a text using pseudo-element for each image?

Question

我目前有 4 张图片，我使用 CSS 动画每 X 秒显示一张不同的图片。问题是我想为每张图片添加一个独特的文本。例如，对于第一张图片，“First Image”，对于第二张图片，“Second Image”等。

这是我的 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中移动图片和文字，并添加anima