javascript - 使图像标题在图像下方滑动？

Question

我遇到了一些麻烦，无法让我的图片说明在图片下方滑动，而不是像现在这样在图片上方滑动。所以它会向下滑动而不是向上滑动。

我尝试了所有方法，但找不到要更改的正确代码，因为我不是真正的编码员，所以不知道这是 .css 还是 .js 问题。我在玩我的 CSS 但没有成功。

你可以在这里看到:HERE

我喜欢标题在图像下方滑动，但对下面的图像没有影响，它必须在所有人的前面。这是我的 CSS:

.team-member{
    position:relative;
display: inline-block;
    overflow:hidden;
    padding-bottom:89px;
    margin-bottom:30px;
margin-right: 10px;
    width: 269px;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
}

.team-member .team-member-image{
    width:100%;
}

.team-member-info{
    padding:10px;
    position:absolute;
    z-index:10;
    margin-top:-89px;
    top:100%;
    left:0;
    background:#fff;
    right:0;
    bottom:0;


    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    backface-visibility: hidden;
}

.team-member .social-media li{
    margin-right:4px;
}

.team-member .social-media li:last-child{
    margin-right:0;
}

.team-member-more{
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transition: all .4s ease 0.1s;
    -webkit-transition: all .4s ease 0.1s;
    -moz-transition: all .4s ease 0.1s;
}   

.team-member:hover .team-member-info{
    top:80px;
}

.team-member:hover .team-member-more{
    opacity:1;
    -moz-opacity:1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
}

.team-member-info h2{
    margin:3px 0 0;
}

.team-member-info .job{
    color:#95999e;
    font-size:13px;
    display:block;
    margin-bottom:17px;
    white-space:nowrap;
}

.team-member.big{
    background:#fff;
    padding:0;
}

.team-member.big .team-member-image{
    width:50%;
    padding-right:15px;
    float:left;
}

.team-member.big .team-member-info{
    position:relative;
    margin-top:0;
    top:0;
    float:left;
    width:50%;
    padding:30px 30px 30px 15px;
}

.team-member.big .team-member-more{
    opacity:1;
    -moz-opacity:1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
}

有什么想法吗？

Answer 1

好的，根据您的要求，我已将代码简化为基本级别。此代码段中没有 CSS 转换，但我很确定您可以修改/将它们添加到代码段中。我刚刚添加了一个容器，其中包含所有这些团队成员的东西。我已经给出了一些不同的颜色来区分各种 div 之间的区别...所以就这样吧..

#container{
            margin:0 auto;
            width:900px;
            height: 700px;
            background-color: rgba(225,225,225,0.5);
        }
        .team-member{
            float:left;
            box-sizing:border-box;
            width: 269px;
            margin:10px;
            height:280px;
            overflow: hidden;
        }
        .team-member-image{
            display: inline-block;
        }
        .team-member-info{
            background-color: #f0ffa1;
            padding:10px;
        }
        .team-member-more{
            height: 279px;
            display:none;
            padding:10px;
            position: relative;
        }
        .team-member:hover .team-member-more{
            display: block;
            z-index: 100;
            background-color: #ffd52f;
        }
        .team-member:hover{
            overflow: visible;
        }

<div id="container">
    
        <div class="team-member animate-onscroll ">
            <img class="team-member-image" src="http://img4.wikia.nocookie.net/__cb20120110224126/rambo/images/c/c1/John_James_Rambo.jpg" width="100%" alt="" />
            <div class="team-member-info">
                <h2>John Rambo</h2>
                <span class="job">The Warior</span>        
            </div>

            <div class="team-member-more">
                     <p>John James Rambo. He was born on July 6, 1946 in Bowie, Arizona, to a Navajo father (whose name according to the last film was probably R. Rambo) and an Italian American mother Marie Drago.</p>
                     <ul class="list arrow-list">
                         <li>Bow</li>
                         <li>Guns</li>
                         <li>Other Stuff</li>
                     </ul>
             </div>
        </div>
        
        <div class="team-member animate-onscroll ">
            <img class="team-member-image" src="http://img4.wikia.nocookie.net/__cb20120110224126/rambo/images/c/c1/John_James_Rambo.jpg" width="100%" alt="" />
            <div class="team-member-info">
                <h2>nisi probant</h2>
                <span class="job">The Warior</span>        
            </div>

            <div class="team-member-more">
                <p>Amet appellat voluptate, tamen te nescius ubi multos ab malis quamquam adipisicing ita incurreret iis probant. Ex ut noster nisi quae ut vidisse aute arbitror laborum, incurreret tamen deserunt o fugiat senserit o expetendis.</p>
                     <ul class="list arrow-list">
                         <li>Bow</li>
                         <li>Guns</li>
                         <li>Other Stuff</li>
                     </ul>
             </div>
        </div>
        
        <div class="team-member animate-onscroll ">
            <img class="team-member-image" src="http://img4.wikia.nocookie.net/__cb20120110224126/rambo/images/c/c1/John_James_Rambo.jpg" width="100%" alt="" />
            <div class="team-member-info">
                <h2>familiaritatem eram</h2>
                <span class="job">The Warior</span>        
            </div>

            <div class="team-member-more">
                <p>quorum nostrud excepteur qui irure cillum senserit appellat fugiat varias expetendis excepteur eruditionem voluptatibus possumus</p>
                     <ul class="list arrow-list">
                         <li>Bow</li>
                         <li>Guns</li>
                         <li>Other Stuff</li>
                     </ul>
             </div>
        </div>
    
        <div class="team-member animate-onscroll ">
            <img class="team-member-image" src="http://img4.wikia.nocookie.net/__cb20120110224126/rambo/images/c/c1/John_James_Rambo.jpg" width="100%" alt="" />
            <div class="team-member-info">
                <h2>John Rambo</h2>
                <span class="job">The Warior</span>        
            </div>

            <div class="team-member-more">
                     <p>John James Rambo. He was born on July 6, 1946 in Bowie, Arizona, to a Navajo father (whose name according to the last film was probably R. Rambo) and an Italian American mother Marie Drago.</p>
                     <ul class="list arrow-list">
                         <li>Bow</li>
                         <li>Guns</li>
                         <li>Other Stuff</li>
                     </ul>
             </div>
        </div>
    
        <div class="team-member animate-onscroll ">
            <img class="team-member-image" src="http://img4.wikia.nocookie.net/__cb20120110224126/rambo/images/c/c1/John_James_Rambo.jpg" width="100%" alt="" />
            <div class="team-member-info">
                <h2>John Rambo</h2>
                <span class="job">The Warior</span>        
            </div>

            <div class="team-member-more">
                     <p>John James Rambo. He was born on July 6, 1946 in Bowie, Arizona, to a Navajo father (whose name according to the last film was probably R. Rambo) and an Italian American mother Marie Drago.</p>
                     <ul class="list arrow-list">
                         <li>Bow</li>
                         <li>Guns</li>
                         <li>Other Stuff</li>
                     </ul>
             </div>
        </div>
    
        <div class="team-member animate-onscroll ">
            <img class="team-member-image" src="http://img4.wikia.nocookie.net/__cb20120110224126/rambo/images/c/c1/John_James_Rambo.jpg" width="100%" alt="" />
            <div class="team-member-info">
                <h2>John Rambo</h2>
                <span class="job">The Warior</span>        
            </div>

            <div class="team-member-more">
                     <p>John James Rambo. He was born on July 6, 1946 in Bowie, Arizona, to a Navajo father (whose name according to the last film was probably R. Rambo) and an Italian American mother Marie Drago.</p>
                     <ul class="list arrow-list">
                         <li>Bow</li>
                         <li>Guns</li>
                         <li>Other Stuff</li>
                     </ul>
             </div>
        </div>
	
    </div>

您可以围绕此代码段添加更多样式...希望这会有所帮助。如果您认为我提供了一个不错的答案并且令您满意，请不要忘记将其标记为已接受的答案。谢谢