文字退出的時候不像進入的時候一個一個進入，是一起退出的。

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

figure figcaption{position: absolute; left: 0px; top: 0px;}

figure ?img{transition: all .35s; opacity: 0.8;}

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

@media screen and ?(max-width: 600px) {

? ?figure{width: 100%;}?

}

@media screen and (min-width: 601px) and (max-width: 1000px) {

? ?figure{width: 50%;}?

}

@media screen and ( min-width: 1001px;) {

?figure{width: 33.33%;}?

}

.test1{ background: #f00; }

.test1 figcaption{padding: 20px}

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

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

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

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

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

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

<figure class="test1">

<img src="../Images/video/sp.jpg" alt="" />

<figcaption>

<h2>圖片標題</h2>

<p>圖片注解</p>

<p>圖片注解</p>

<p>圖片注解</p>

</figcaption>

</figure>