0

我试图使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>
4

2 回答 2

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; }
于 2013-08-19T07:24:54.277 回答
0

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

于 2013-08-19T07:29:29.660 回答