应在悬停图片上显示的文字仅显示在一张图片上

Question

标题中描述的问题。

我在这里发布了我的代码，没有图片，但我希望你能理解这个问题。 我认为它具有定位（绝对/相对）的东西，但是将.figure的定位改为相对隐藏了我的网页中的该部分。 Video，可让您了解问题（通过电话快速录制）

https://jsfiddle.net/p0txnbbx/3/

    .section-meals {
        padding: 0;  
    }

    .meals-showcase {
        list-style: none;
        width: 100%;
        margin-bottom: 0px;
    }

    .meals-showcase li {
        display: block;
        float: left;
        width: 25%;
    }

    .meal-photo {
        width: 100%;
        margin: 0;
        overflow: hidden;
        background-color: #000;
    }

    .meal-photo img {
       /* opacity: 0.7;*/
        width: 100%;
        height: auto;
    	-webkit-transition: all 300ms;
    	-moz-transition: all 300ms;
    	transition: all 300ms;
        /*-webkit-transform: scale(1.15);
        transform: scale(1.15);
        -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
        -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: transform 0.5s, opacity 0.5s;
        transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;*/
        background-color: black;
        opacity: 0.8;
    }

    .meals-showcase li:hover img {
    	-webkit-transform: scale(1.2);
    	-moz-transform: scale(1.2);
    	transform: scale(1.2);
        opacity: 0.6;
    }

    .meals-showcase figcaption {
    	/*background: rgba(0,0,0,0.8);*/
    	color: white;
    	display: table;
    	height: 100%;
    	left: 0;
    	opacity: 0;
    	position: absolute;
    	right: 0;
    	top: 0;
    	-webkit-transition: all 300ms;
    	-moz-transition: all 300ms;
    	transition: all 300ms;
    	-webkit-transition-delay: 100ms;
    	-moz-transition-delay: 100ms;
    	transition-delay: 100ms;
    	z-index: 100;
    }

    .meals-showcase figcaption p {
    	display: table-cell;
    	font-size: 1.5em;
    	position: relative;
      color: #000;
        left: 20px;
    	top: -40px;
    	width: 289px;
    	-webkit-transition: all 300ms ease-out;
    	-moz-transition: all 300ms ease-out;
    	transition: all 300ms ease-out;
    	vertical-align: middle;
    }

    .meals-showcase li:hover figcaption p {
    	-moz-transform: translateY(100px);
    	-webkit-transform: translateY(100px);
    	transform: translateY(100px);
    }

    .meals-showcase li:hover figcaption {
    	opacity: 1;
    }
    <section class="section-meals">
                <ul class="meals-showcase clearfix">
                    <li>
                        <figure class="meal-photo">
                            <img src="img/1.jpg" alt="Korean bibimbap with egg and vegetables">
                        </figure>
                        <figcaption><p>Korean bibimbap</p></figcaption>
                    </li>
                    <li>
                        <figure class="meal-photo">
                            <img src="img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
                        </figure>
                        <figcaption><p>Korean bibimbap</p></figcaption>
                    </li>
                    <li>
                        <figure class="meal-photo">
                            <img src="img/3.jpg" alt="Chicken breast steak with vegetables">
                        </figure>
                        <figcaption><p>Korean bibimbap</p></figcaption>
                    </li>
                    <li>
                        <figure class="meal-photo">
                            <img src="img/4.jpg" alt="Autumn pumpkin soup">
                        </figure>
                        <figcaption><p>Korean bibimbap</p></figcaption>
                    </li>
                </ul>
                <ul class="meals-showcase clearfix">
                    <li>
                        <figure class="meal-photo">
                            <img src="img/5.jpg" alt="Paleo beef steak with vegetables">
                        </figure>
                        <figcaption><p>Korean bibimbap</p></figcaption>
                    </li>
                    <li>
                        <figure class="meal-photo">
                            <img src="img/6.jpg" alt="Healthy baguette with egg and vegetables">
                        </figure>
                        <figcaption><p>Korean bibimbap</p></figcaption>
                    </li>
                    <li>
                        <figure class="meal-photo">
                            <img src="img/7.jpg" alt="Burger with cheddar and bacon">
                        </figure>
                        <figcaption><p>Korean bibimbap</p></figcaption>
                    </li>
                    <li>
                        <figure class="meal-photo">
                            <img src="img/8.jpg" alt="Granola with cherries and strawberries">
                        </figure>
                        <figcaption><p>Korean bibimbap</p></figcaption>
                    </li>
                </ul>
            </section>