캡션 - - 바닥에서의 슬라이드 하단

Question

밖으로 슬라이드 나는 다음과 같은 일을 가지고 호버 (hover) 중에 바닥에 놓고, 내리지 않을 때는 바닥에서 밀어냅니다. 나는 여기저기서 몇 가지 자료를 보았지만 올바르게 이해할 수없는 것처럼 보였다. 이 경우 주 컨테이너 (1/3)의 크기가 조정되지 않는 것이 중요합니다. 캡션이 그 안에 있어야합니다. 이것을 어떻게 할 수 있습니까?

Answer 1

DEMO - 이와 비슷한?

CSS3 transition-duration (W3Schools)을 사용하여 애니메이션을 만듭니다.

업데이트 :

DEMO - 그래서 당신은 토스터 효과를 찾고?

업데이트 2 :

DEMO - jQuery를 .animate() 대신를 사용하여 애니메이션.

Answer 2

다음은 내가 결국 생각한 것입니다. 그것은 내가 필요한 모든 것을 다룹니다 ... 전복시 바닥에 토스트 쇼가 있습니다. 전체 div는 롤오버되었을 때 링크이며, 링크도 포함시킬 수 있습니다. '애니메이션'은 FF에서만 작동하지만 내 div에서 둥근 모서리를 사용하므로이 작업을 수행 ... 오버레이를 따르지 않는 이유가 무엇이든간에 건배 : 숨겨진 모서리가 둥글지 않도록 숨겨져 있습니다.

 <div class="one-third"> 
      <div class="inside"> 
       <a href="#"></a> 
       <h4><strong>How much can you save?</strong></h4> 
       <p>testing</p> 
       <p>testing</p> 
       <p><a class="link" href="#">testing</a></p> 
       <p>testing</p> 
       <span class="toast">Learn more about one</span> 
      </div> 
     </div> 

CSS :

.one-third{ 
border:1px solid #d8d8d8; 
margin:0 9px; 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
background:#ffffff; 
text-align:center; 
position:relative; 
overflow:hidden; 
cursor: pointer; 

} 

.one-third:hover{ 
background: #eeeeee; 
} 

.one-third .inside{ 
padding:10px; 
} 

.one-third a{ /*entire div link*/ 
position:absolute; 
width:100%; 
height:100%; 
top:0; 
left: 0; 
/* edit: added z-index */ 
z-index: 1; 
} 

.one-third a.link { /*links on top of box*/ 
position:relative; 
z-index:2; 
} 

.one-third .inside .toast { 
background: rgb(71, 71, 71); /* Fall-back for browsers that don't support rgba */ 
background: rgba(0, 0, 0, .7); 
display: block; 
position: absolute; 
left: 0; 
width: 100%; 
bottom: -30px; 
line-height:30px; 
color: #fff; 
font-size:14px; 
text-align: center; 
transition: all 0.1s linear 0s; /*no moz, webkit, or o because radius is needed and won't scroll right*/  
-moz-border-radius: 0 0 6px 6px; 
-webkit-border-radius: 0 0 6px 6px; 
border-radius: 0 0 6px 6px; 
} 

.one-third:hover .toast { 
bottom: 0; 
}