顯示過渡元素

我在我的網站上爲每個div（bg類）設置了標題，但它們僅在徘徊時出現，實際上我希望它們出現在頁面上，然後在懸停時轉換。以下是我的代碼。顯示過渡元素

CSS：

.caption { 
    color:white; 
    z-index:100; 
    position:relative; 
    word-spacing: 100px; 
    font-size:12pt; 
    -webkit-transition: font-size .4s ease-out 1s, word-spacing .4s ease-out 1.5s; 
    -moz-transition: font-size .4s ease-out 1s, word-spacing .4s ease-out 1.5s; 
    -o-transition: font-size .4s ease-out 1s, word-spacing .4s ease-out 1.5s; 
    -ms-transition: font-size .4s ease-out 1s, word-spacing .4s ease-out 1.5s, 
    transition: font-size .4s ease-out 1s, word-spacing .4s ease-out 1.5s; 
} 
.bg:hover .caption { 
    font-size:72px; 
    word-spacing: 17px; 
}

HTML：

<div id='ne' class='bg'> 
     <div class='overlay'> 
     <span class='caption'>News</span> 
     </div> 
    </div>

來源

2014-09-21 czmudzin

=>'color：white;' – AvrilAlejandro 2014-09-21 04:48:16

@avrilalejandro，我不確定你的意思？ – czmudzin 2014-09-21 04:50:41

白色文字顏色消失 – AvrilAlejandro 2014-09-21 04:53:28

OK，改變你的CSS來此：

.caption { 
    font-family:'Raleway', sans-serif; 
    font-weight:100; 
} 
body { 
    background: url('http://www.bootply.com/assets/example/bg_blueplane.jpg'); 
    height:100%; 
    margin:0; 
    padding:0; 
} 
div.bg { 
    position:fixed; 
    width:50%; 
    height:50% 
} 
#nw { 
    top:0; 
    left:0; 
    background-image: url('clevelandnight.jpg'); 
    background-size:cover; 
} 
#ne { 
    top:0; 
    left:50%; 
    background-image: url('news1.jpg'); 
    background-size:cover; 
} 
#sw { 
    top:50%; 
    left:0; 
    background-image: url('drinks1.jpg'); 
    background-size:cover; 
} 
#se { 
    top:50%; 
    left:50%; 
    background-image: url('clevelandday.jpg'); 
    background-size:cover; 
} 
.overlay { 
    height:100%; 
    -webkit-transition: all .4s ease-out; 
    -moz-transition: all .4s ease-out; 
    -o-transition: all .4s ease-out; 
    -ms-transition: all .4s ease-out; 
    transition: all .4s ease-out; 
} 
.bg:hover .overlay { 
    background:rgba(0, 0, 0, .75); 
    opacity: 1; 
    height:100%; 
} 
.caption { 
    color:white; 
    z-index:100; 
    position:relative; 
    word-spacing: 100px; 
    font-size:12pt; 
    -webkit-transition: font-size .4s ease-out 1s, word-spacing .4s ease-out 1.5s; 
    -moz-transition: font-size .4s ease-out 1s, word-spacing .4s ease-out 1.5s; 
    -o-transition: font-size .4s ease-out 1s, word-spacing .4s ease-out 1.5s; 
    -ms-transition: font-size .4s ease-out 1s, word-spacing .4s ease-out 1.5s, transition: font-size .4s ease-out 1s, word-spacing .4s ease-out 1.5s; 
} 
.bg:hover .caption { 
    font-size:72px; 
    word-spacing: 17px; 
}

See fiddle here

的背景圖像，所以你可以看到效果了，因爲我看不到任何東西（黑色黑！），但當然，你需要改變它。

說明：

由於opacity影響，而不是與元素的整體透明度播放整個元素及其孩子，我只是用的背景alpha channel，這種方式不透明度始終是1和所有.overlay內的元素都可見

來源

2014-09-21 05:23:23 Devin

真棒。非常感謝你。我能問清楚你改變了什麼嗎？ – czmudzin 2014-09-21 05:30:53

沒問題，很高興幫助:) – Devin 2014-09-21 05:31:27