Make image caption slide under image?

Question

I'm having some trouble to make my image caption to slide under image not over image as it is now. So it would slide down not up.

I tried everything but can't find the right code to change as I'm not really a coder so don't know if this is .css or .js problem. I was playing around my css but no success.

You can see it here: HERE

Id like the caption to slide under image but with no effect on images below it has to be in front of all. Here is my 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);
}

Any idea?

Answer 1

ok based on what you have asked, I have simplified the code to bare bone level. There is no CSS transforms in this snippet but I am pretty sure you can modify/add those into the snippet. I just added a container which holds all these team member stuff. I have given some different colors to tell the difference between various divs... so here it goes..

 #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> 

You can add any more styling around this snippet...Hope this helps. And if you think I have provided a decent answer and it is up to your satisfaction please do not forget to mark it as an accepted answer. Thanks