このサイトに似たようなものを実装したい: 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;
}
しかし、移行は機能していません。