1

ホバー時に div の位置を変更したいのですが、これは次のコードで行うことができます。の任意の場所にカーソルを合わせると.box、 の位置が.info下から上に変更されます。

トランジション効果で位置を変えたいので、上に移動するのではなく、すばやく表示されるようにします。CSSだけでできますか？

トランジション プロパティを使用しようとしていますが、機能させることができません。これが私のコードです：

HTML:

<div class="box">
    <div class="img"><img src="http://i.imgur.com/SGw04SV.jpg" /></div>
    <div class="info">
        <div class="title">Hello world</div>
        <div class="more">more stuff</div>
    </div>    
</div>

CSS:

.box{
    width: 400px;
    height: 400px;
    overflow: hidden;
    position: relative;
    -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
}

.info{
    position: absolute;
    bottom: 0;
    
}

.box:hover .info{
    top: 0;
}

デモ: https://jsfiddle.net/fXXsS/

4

2 に答える 2

1

にトランジションを適用する必要があります.info。レイアウトではなく、プロパティのみをアニメーション化できます。

    .box {
        width: 400px;
        height: 400px;
        overflow: hidden;
        position: relative;
    }
    
    .info {
        position: absolute;
        top: 0; margin-top: 90%;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;    
    }

    .box:hover .info {
        margin-top: 0%;
    }

https://jsfiddle.net/Recode/fXXsS/2/

編集：高さが変わると問題が発生するため、現時点では少しハックです。;)

于 2013-09-13T20:01:46.133 に答える