为什么这种过渡不起作用？

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; }

Answer 2

您可以在CSS3动画中使用翻译。你可以通过使用它来获得生动的动画淡出。