我有以下代码但无法在悬停时进行平滑过渡。
TextReader
我在实际课程中应用了过渡效果,但由于某种原因,它没有检测到效果。
演示:https://jsfiddle.net/squidraj/r4LLf4w0/
非常感谢任何帮助。
答案 0 :(得分:9)
您正在使用visibility
并转换opacity
。属性visibility
,display
以及其他一些属性无法转换。
.image_container {
position: relative;
width: 279px;
height: 279px;
}
.image_container img {
display: block;
position: relative;
}
.bio_overlay {
background: #ffc27f;
bottom: 0;
height: 100%;
left: 2.5rem;
opacity: 0.4;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.5s ease-in-out 0s;
width: 100%;
opacity: 0;
}
.image_container:hover .bio_overlay {
opacity: 0.4;
}

<div class="image_container">
<figure>
<img alt="" src="http://dummyimage.com/279x279/000000/fff" />
</figure>
<div class="bio_overlay"></div>
</div>
&#13;
答案 1 :(得分:3)
点击此处 jsfiddle
transition
无法与visibility
合作。它只适用于“calulable”#39;值(0,1)等等......而不是可见性使用opacity
代码:
bio_overlay {
background: #ffc27f;
bottom: 0;
height: 100%;
left: 2.5rem;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.5s ease-in-out 0s;
opacity:0;
width: 100%;
}
.image_container:hover .bio_overlay {
opacity:0.4;
}
答案 2 :(得分:0)
只需将visibility:
代码替换为opacity:
代码即可。
https://jsfiddle.net/r4LLf4w0/2/
答案 3 :(得分:0)
试试这个:
Oracle