css - 为什么这种转变不起作用？

Question

我试图让 div 淡入，但无济于事。
我不确定为什么它不起作用。

如何仅使用 CSS 实现这种效果？

Fiddle

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>

Answer 1

问题是设置显示。技巧是将所有初始样式设置为看不见的元素，然后仅触发和更改过渡样式。

解决方法:

http://jsfiddle.net/54bxS/1/

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: table-cell;
    transition: opacity 1s;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    vertical-align: middle;
    opacity: 0; }
  .works a:hover div {
    transition: opacity 1s;
    opacity: 1; }