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;
}

Answer 2

您需要transition上的a .show代码，并使用opacity代替display：

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;
}

Answer 3

试试这个，

的CSS

.company .show{
    display:block;
    width:220px;
    height:250px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color:#f7481b;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: all .30s ease-in;
    -moz-transition: all .30s ease-in;
    -o-transition: all .30s ease-in;
    -ms-transition: all .30s ease-in;   
    transition: all .30s ease-in;
}
.company .show h1{
    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transition: all .30s ease-in;
    -moz-transition: all .30s ease-in;
    -o-transition: all .30s ease-in;
    -ms-transition: all .30s ease-in;   
    transition: all .30s ease-in;
}
.company:hover .show{
    background: rgba(0, 0, 0, 0.8);
}
.company:hover .show h1{
    opacity: 10;
    -moz-opacity: 10;
    filter:alpha(opacity=100);
}

HTML

<div class="company">
<img src="http://static.adzerk.net/Advertisers/bd294ce7ff4c43b6aad4aa4169fb819b.jpg"/>
<div class="show">
<h1>This Text Will Show Upon Hover</h1>
</div>
</div>

jsFiddle File

如何为此添加CSS过渡效果

3 个答案: