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.

Один из способов решения этой проблемы - использовать возможность установить преобразование в процентах вместо пикселей. И оставить на дне в 0px, то есть только знать положение, которое будет зависеть от содержания:

.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 набор преобразований, начальное состояние является «трансформируется» и парение государственных нужд для сброса.