我试图使div
淡入淡出,无济于事。
我不确定为什么它不起作用。
如何仅使用 CSS 实现此效果?
小提琴
CSS:
.works a {
display: table !important;
width: 100%;
background: url("http://www.9ori.com/store/media/images/8ab579a656.jpg") center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 300px;
}
.works a div {
display: none;
opacity: 0;
}
.works a:hover div {
transition: opacity 1s;
color: white;
background: rgba(0, 0, 0, 0.6);
display: table-cell;
opacity: 1;
vertical-align: middle;
}
HTML:
<div class="works">
<a href="blah.ca">
<div class="work-hover">
This was my first ever professionally designed website. Also note that this was before I discovered SASS, so the coding isn't as streamlined as possible. But the end result is great looking, and fully functional in most modern browsers.
</div>
</a>
</div>