html - 如何为此添加 CSS 过渡效果

Question

我想在此站点中实现类似的功能: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;
}

但是转换不起作用。

Answer 1

Working jsFiddle Demo

您必须稍微更改您的标记:

<div class="box">
    <div class="image"><img src="http://placekitten.com/250/250" /></div>
    <div class="text">
        Hello World
    </div>
    <a href="#"></a>
</div>

在 CSS 中:

.box {
    position: relative;
    width: 250px;
    height: 250px;
}

.box .image, .box .text, .box a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.box .text {
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 24px;
    padding-top: 100px;
    opacity: 0;
    transition: opacity 0.5s;
}

.box:hover .text {
    opacity: 1;
}