我遇到了问题。当我将鼠标悬停在图像上时,会出现一个黑色叠加,但CSS Transition属性不起作用。
这是html:
<div class="col-md-12">
<div class="collection-category">
<img src="http://dummyimage.com/600x400/#C1C1C1/fff" />
<a href="#">
<div class="overlay_wrap">
<div class="overlay">
<h2 class="collection_title">Headline One</h2>
</div>
</div>
</a>
</div>
</div>
CSS就是:
.collection-category {
display: block;
overflow: hidden;
margin: 10px 0;
position: relative;
}
.collection-category img {
width: 100%;
max-height: 250px;
}
.collection_title {
display: table-cell;
vertical-align: middle;
font-size: 28px;
}
.overlay_wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.overlay {
display: none;
background: rgba(2, 2, 2, 0.61);
color: #FFF;
text-align: center;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.collection-category:hover>a>.overlay_wrap>.overlay {
display: table;
height: 100%;
width: 100%;
}
这是JSFiddle
任何帮助都将受到高度赞赏。
提前谢谢。答案 0 :(得分:4)
这是因为您无法从display: none
过渡到display: table
。
相反,您可以通过将初始显示设置为opacity
和table
,然后转换为opacity: 0
来转换opacity: 1
属性:
.overlay {
display: table;
background: rgba(2, 2, 2, 0.61);
color: #FFF;
text-align: center;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
opacity: 0;
height: 100%;
width: 100%;
}
.collection-category:hover>a>.overlay_wrap>.overlay {
opacity: 1;
}