0

I have somewhat of a problem. I have a slider (royal slider) with a customized skin. On the slider hover, the caption rises from the bottom, however, it only looks good if the caption is one line.

Is there a way I can make it rise from the same starting position from the bottom, that shows the entire caption for each slide, even if the amount of content is different for each slide.

/***************
*
*  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);


}
4

1 に答える 1

0

あなたのシステムは今、ボトムダウンを設定します:

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

ホバーすると上に移動します

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

これは、rsGCaption のさまざまなサイズに適応するのが困難です。

これを解決する 1 つの方法は、変換をピクセルではなくパーセンテージで設定する可能性を使用することです。下部を 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 セットの変換が必要であることに注意してください。初期状態は「変換済み」で、ホバー状態をリセットする必要があります。

于 2013-10-24T17:35:19.877 に答える