图片动画-平移

CSS:

<style>
        body, figure, figcaption {
            margin: 0;
            padding: 0;
        }


        figure {
            position: relative;
            width: 33.33%;
            height: 350px;
            overflow: hidden;
            float: left;
        }


        figcaption {
            position: absolute;
            top: 0px;
            left: 0px;
            color: #fff;
            font-family: "微软雅黑";
        }


        figure img {
            opacity: 0.9;
            transition: all 0.35s;
        }


        figure figcaption p, h2, span, div {
            transition: all 0.35s;
        }



        .test1 {
            background: #000;
        }


            .test1 figcaption p {
                background: #fff;
                color: #333;
                margin: 5px;
                text-align: center;
                transform: translate(-120px,0px);
            }


                .test1 figcaption p:nth-of-type(1) {
                    transition-delay: 0.05s;
                }


                .test1 figcaption p:nth-of-type(2) {
                    transition-delay: 0.1s;
                }


                .test1 figcaption p:nth-of-type(3) {
                    transition-delay: 0.15s;
                }


            .test1 figcaption {
                padding: 20px;
            }


            .test1:hover figcaption p {
                transform: translate(0px,0px);
            }


            .test1:hover img {
                transform: translate(-20px,0px);
                opacity: 0.5;
            }

Body:

<figure class="test1">
        <img src="phto/051552412060.jpg" />
        <figcaption>
            <h2>图片标题</h2>
            <p>图片注解1</p>
            <p>图片注解2</p>
            <p>图片注解3</p>
        </figcaption>
    </figure>