在另外两个人的顶部添加另一个悬停功能

Question

我想在悬停后在框的底部添加一个小的说明。就像这样：

我已经拿到了冠军滑动从上而下的图像向中心滑动。但我想添加另一个从下往上滑动的描述。 （我用photoshop做了底部文字效果来展示我的意思）。

到目前为止的代码：

#box{ 
 
     margin-top:200px; 
 
     margin-left:80px; 
 
     width:1200px; 
 
     left: 40px; 
 
     right:100px; 
 
     } 
 

 
    .base{ 
 
     position:relative; 
 
     overflow: hidden; 
 
     width:335px; 
 
     height: 265px; 
 
     float: left; 
 
     border:1px solid #f0f0f0; 
 
     margin-left:55px; 
 
     margin-bottom:75px; 
 
     background-color: #fef9f9; 
 
     -moz-box-shadow: 0px 5px 6px #dcdcdc; 
 
     -webkit-box-shadow: 0px 5px 6px #dcdcdc; 
 
     box-shadow: 0px 5px 7px #dcdcdc; 
 
    } 
 
     
 
    .name {position:relative; 
 
     color:#bbb; 
 
     font-family: anton; 
 
     font-size:25px; 
 
     letter-spacing: 0px; 
 
     text-align:center; 
 
     width:330px; 
 
     text-shadow: 2px 2px 2px #fff; 
 
     margin-top: -35px; 
 
     z-index:4; 
 
     -webkit-transition: all 0.8s ease-in-out; 
 
     -moz-transition: all 0.8s ease-in-out; 
 
     -transition: all 0.8s ease-in-out;} 
 
    .base:hover .name {margin-top: 0px; 
 
     -webkit-transition: all 0.8s ease-in-out; 
 
     -moz-transition: all 0.8s ease-in-out; 
 
     -transition: all 0.8s ease-in-out;} 
 
    .base img{ 
 
     width:270px; 
 
     height: 200px; 
 
     margin-left:21px; 
 
     margin-top:21px; 
 
     padding:10px; 
 
     border:1px solid #f0f0f0; 
 
     background:#fff; 
 
     -moz-box-shadow: 0px 5px 6px #dcdcdc; 
 
     -webkit-box-shadow: 0px 5px 6px #dcdcdc; 
 
     box-shadow: 0px 5px 7px #dcdcdc; 
 
     -webkit-transition: all 0.8s ease-in-out; 
 
     -moz-transition: all 0.8s ease-in-out; 
 
     -transition: all 0.8s ease-in-out;} 
 
    .base img {position: absolute;} 
 
    .dude1{ 
 
     opacity:0; 
 
     position:relative; 
 
     left:-90px; 
 
     z-index:1; 
 
     -webkit-transition: all 0.8s ease-in-out; 
 
     -moz-transition: all 0.8s ease-in-out; 
 
     -transition: all 0.8s ease-in-out;} 
 
    .dude1 img { width:130px;} 
 
    .base:hover .dude1{ 
 
     left:0px; 
 
     -webkit-transition: all 0.8s ease-in-out; 
 
     -moz-transition: all 0.8s ease-in-out; 
 
     -transition: all 0.8s ease-in-out; 
 
     opacity:1;} 
 
    .dude2{ 
 
     opacity:0; 
 
     position:relative; 
 
     left:230px; 
 
     z-index:1; 
 
     -webkit-transition: all 0.8s ease-in-out; 
 
     -moz-transition: all 0.8s ease-in-out; 
 
     -transition: all 0.8s ease-in-out;} 
 
    .dude2 img {width:130px;} 
 
    .base:hover .dude2{ 
 
     left:140px; 
 
     -webkit-transition: all 0.8s ease-in-out; 
 
     -moz-transition: all 0.8s ease-in-out; 
 
     -transition: all 0.8s ease-in-out; 
 
     opacity:1;} 
 
     
 
    #s-m-t-tooltip { 
 
     display: block; 
 
     background: #ccc; 
 
     font-size: 8px; 
 
     font-family: calibri; 
 
     letter-spacing: 1px; 
 
     text-transform: uppercase; 
 
     color: #fff; 
 
     text-align: center; 
 
     margin-left: 18px; 
 
     padding: 2px 5px 2px 5px; 
 
     border: 1px solid #bbb; 
 
     min-width: 40px; 
 
     max-width: 200px; 
 
     box-shadow: 1px 1px 1px rgba(60, 60, 60, 0.3); 
 
     z-index: 99999; 
 
    }

<div class="base"> 
 
<img src="http://i1242.photobucket.com/albums/gg524/ichimango-suki/Tumblr/takayama_zps605c58e9.jpg"/></a> 
 
<div class="dude1"> 
 
<img src="http://i1242.photobucket.com/albums/gg524/ichimango-suki/Tumblr/takayama-yuya_zpsf71d1421.jpg"></a></div> 
 
<div class="dude2"> 
 
<img src="http://i1242.photobucket.com/albums/gg524/ichimango-suki/Tumblr/takayama-yama_zps97c309f6.jpg"></a></div> 
 
<div class="name">TAKAYAMA 
 
</div></div></div></div>

如何添加呢？

Answer 1

#box { 
 
    margin-top: 200px; 
 
    margin-left: 80px; 
 
    width: 1200px; 
 
    left: 40px; 
 
    right: 100px; 
 
} 
 
.base { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 335px; 
 
    height: 265px; 
 
    float: left; 
 
    border: 1px solid #f0f0f0; 
 
    margin-left: 55px; 
 
    margin-bottom: 75px; 
 
    background-color: #fef9f9; 
 
    -moz-box-shadow: 0px 5px 6px #dcdcdc; 
 
    -webkit-box-shadow: 0px 5px 6px #dcdcdc; 
 
    box-shadow: 0px 5px 7px #dcdcdc; 
 
} 
 
.name { 
 
    position: relative; 
 
    color: #bbb; 
 
    font-family: anton; 
 
    font-size: 25px; 
 
    letter-spacing: 0px; 
 
    text-align: center; 
 
    width: 330px; 
 
    text-shadow: 2px 2px 2px #fff; 
 
    margin-top: -35px; 
 
    z-index: 4; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    -transition: all 0.8s ease-in-out; 
 
} 
 
.base:hover .name { 
 
    margin-top: 0px; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    -transition: all 0.8s ease-in-out; 
 
} 
 
.base img { 
 
    width: 270px; 
 
    height: 200px; 
 
    margin-left: 21px; 
 
    margin-top: 21px; 
 
    padding: 10px; 
 
    border: 1px solid #f0f0f0; 
 
    background: #fff; 
 
    -moz-box-shadow: 0px 5px 6px #dcdcdc; 
 
    -webkit-box-shadow: 0px 5px 6px #dcdcdc; 
 
    box-shadow: 0px 5px 7px #dcdcdc; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    -transition: all 0.8s ease-in-out; 
 
} 
 
.base img { 
 
    position: absolute; 
 
} 
 
.dude1 { 
 
    opacity: 0; 
 
    position: relative; 
 
    left: -90px; 
 
    z-index: 1; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    -transition: all 0.8s ease-in-out; 
 
} 
 
.dude1 img { 
 
    width: 130px; 
 
} 
 
.base:hover .dude1 { 
 
    left: 0px; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    -transition: all 0.8s ease-in-out; 
 
    opacity: 1; 
 
} 
 
.dude2 { 
 
    opacity: 0; 
 
    position: relative; 
 
    left: 230px; 
 
    z-index: 1; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    -transition: all 0.8s ease-in-out; 
 
} 
 
.dude2 img { 
 
    width: 130px; 
 
} 
 
.base:hover .dude2 { 
 
    left: 140px; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    -transition: all 0.8s ease-in-out; 
 
    opacity: 1; 
 
} 
 
#s-m-t-tooltip { 
 
    display: block; 
 
    background: #ccc; 
 
    font-size: 8px; 
 
    font-family: calibri; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    text-align: center; 
 
    margin-left: 18px; 
 
    padding: 2px 5px 2px 5px; 
 
    border: 1px solid #bbb; 
 
    min-width: 40px; 
 
    max-width: 200px; 
 
    box-shadow: 1px 1px 1px rgba(60, 60, 60, 0.3); 
 
    z-index: 99999; 
 
} 
 
.desc { 
 
    font-size: 10px; 
 
    z-index: 2; 
 
    background: white; 
 
    padding: 10px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin-bottom: -100px; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    -transition: all 0.8s ease-in-out; 
 
} 
 

 
.base:hover .desc{ 
 
    margin: 0; 
 
}

<div class="base"> 
 
    <img src="http://i1242.photobucket.com/albums/gg524/ichimango-suki/Tumblr/takayama_zps605c58e9.jpg" /> 
 
    </a> 
 
    <div class="dude1"> 
 
    <img src="http://i1242.photobucket.com/albums/gg524/ichimango-suki/Tumblr/takayama-yuya_zpsf71d1421.jpg"> 
 
    </a> 
 
    </div> 
 
    <div class="dude2"> 
 
    <img src="http://i1242.photobucket.com/albums/gg524/ichimango-suki/Tumblr/takayama-yama_zps97c309f6.jpg"> 
 
    </a> 
 
    </div> 
 
    <div class="name">TAKAYAMA 
 
    </div> 
 
    <div class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> 
 
</div>