0

このサイトに似たようなものを実装したい: http://www.michieldegraaf.com/

画像にカーソルを合わせると、画像が遷移し、非表示の div が表示されます。私はそれをしました。しかし、トランジション効果を追加するのに問題があります。追加しましたが、表示されません。

これが私のhtmlです：

<div class="company">
    <a href="#">
        <img src="images/bbb.png"/>
        <div class="show">
            <h1>This Text Will Show Upon Hover</h1>
        </div>
    </a>
</div>

ここに私のCssコードがあります:

a .show{
    display:none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    color:#f7481b;
}

a:hover .show{
    display:block;
    width:298px;
    height:298px;
    -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    transition:all .5s ease-out;
}

しかし、移行は機能していません。

4

3 に答える 3

1

transitionのコードが必要で、の代わりにa .show使用します。opacitydisplay

a .show{
    opacity:0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    color:#f7481b;
    -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    transition:all .5s ease-out;
    width:298px;
    height:298px;
    }

a:hover .show{
    opacity:1;
    width:298px;
    height:298px;
}
于 2013-05-27T13:18:42.880 に答える