Question

我是css和html的新手并且有一个非常小的问题。我试图在鼠标悬停时添加不透明度过渡到图像的描述。但它目前无法正常工作，我不确定原因。

我的HTML代码：

<div class="bucket">
<img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" alt=""/> 
<div class = "img-overlay">
    <h3>Typography</h3></div>
</div>

我的css代码：

.bucket {
width: 31%;
float: left;
position: relative;
margin-top: 1%;
margin-right: 1%;
margin-bottom: 1%;
margin-left: 1%;
text-shadow: 0px 0px 0px;
-webkit-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background-color: rgba(0,0,0,1.00);
overflow: hidden;
    }

.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.05s;
-webkit-transition: opacity 0.05s;
-moz-transition: opacity 0.05s;
}

.bucket:hover .img-overlay {
opacity:0.75;
filter: alpha(opacity=75);
}

.bucket img {
width: 100%;
}

感谢您的帮助

Answer 1

1/20秒太快看不到效果。请改为2s。

Answer 2

http://jsfiddle.net/3VHvM/1/

.img-overlay {
    background-color: rgba(0,0,0,1.00);
    bottom: 0px;
    color: #FFFFFF;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    width: 100%;
    z-index: 1000;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -moz-transition: opacity 2s;
}

Answer 3

它的工作 - 只是看得太快，你需要规定转换速度，尝试1s。此选项设置动画运行所需的时间，0.05s（s =秒），以便快速运行。这里：

transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;

Answer 4

你的代码是正确的。时间太少了。尝试0.5秒。你会看到输出。

Answer 5

除非0.5秒或更慢，否则过渡甚至可能不明显。 Quentin是对的.2s是最快的，如果你正在寻找它，但如果你想让观众注意它，你应该考虑更慢。

不透明度转换不起作用

5 个答案: