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 に答える