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

2

工作 jsFiddle 演示

你必须改变一点你的标记：

<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;
}
于 2013-05-27T13:26:56.953 回答
1

你需要你的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;
}
于 2013-05-27T13:18:42.880 回答
0

试试这个，

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 文件

于 2013-05-27T13:31:21.010 回答