CSS3從相同的起始位置翻譯不同大小的內容

Question

我有點問題。我有一個帶有自定義皮膚的滑塊（皇家滑塊）。在滑塊懸停時，標題從底部上升，但是，如果標題是一行，它看起來不錯。

有沒有一種方法可以使它從底部的相同起始位置上升，即顯示每張幻燈片的整個標題，即使每張幻燈片的內容量不同。

/*************** 
* 
* 8. Global caption 
* 
****************/ 
.custom-smc .rsGCaption { 
    position: absolute; 
    float: none; 
    bottom: -30px; 
    left: 0px; 
    text-align: left; 

    background: #BD3333; 

    color: #fff ; 
    padding: 13px 10px 10px 10px; 
    width: 100%; 

    font-size: 12px; 

opacity:0.5; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 



} 

#new-royalslider-7:hover .rsGCaption { 


opacity:.9; 
transform: translate(0,-30px); 
    -webkit-transform: translate(0,-30px); 
    -o-transform: translate(0,-30px); 
    -moz-transform: translate(0,-30px); 


} 

Answer 1

現在系統設置下下來：

.custom-smc .rsGCaption { 
    bottom: -30px; 
} 

和懸停移動它向上

#new-royalslider-7:hover .rsGCaption { 
    transform: translate(0,-30px); 
} 

這是難以適應不同尺寸的rsGCaption的。

解決此問題的一種方法是使用posibility來設置百分比變換，而不是像素。而離開底部在0像素，這是唯一知道位置，這將是獨立的內容：

.rsGCaption { 
    position: absolute; 
    float: none; 
    bottom: 0px; 
    left: 0px; 
    text-align: left; 
    background: #BD3333; 
    color: #fff ; 
    padding: 13px 10px 10px 10px; 
    width: 100%; 
    font-size: 12px; 
    opacity:0.5; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    -webkit-transform: translate(0,100%); 
    -o-transform: translate(0,100%); 
    -moz-transform: translate(0,100%); 
    transform: translate(0,100%); 
} 

#new-royalslider-7:hover .rsGCaption { 
    opacity:.9; 
    transform: translate(0,0%); 
    -webkit-transform: translate(0,0%); 
    -o-transform: translate(0,0%); 
    -moz-transform: translate(0,0%); 
} 

注意，現在我們需要2臺變換，初始狀態是「轉化」和懸停狀態的需求被重置。