CSS懸停圖片說明問題

我有我的網站後臺分隔成4個格，使他們各拿頁面的增長25％
的目標是有當鼠標懸停在覆蓋褪色（我申請在第一幅圖片 - #nw）CSS懸停圖片說明問題
的問題是，我無法從類.caption文本顯示

的代碼如下：

CSS

.overlaytext {font-family: 'Raleway', sans-serif;} 
body { 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 { 
    background:rgba(0,0,0,.75); 
    opacity:0; 
    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; 
} 
#nw:hover .overlay { 
    opacity: 1; 
    height:100%; 
} 
.caption { 
font-color:white; 
z-index:100; 
}

HTML

<html> 
    <head> 
    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> 
    <title>Craig Does Cleveland</title> 
    <link href='stylesheet2.css' rel='stylesheet' type='text/css'> 
    </head> 
    <body> 
    <div id='nw' class='bg'> 
     <div class='overlay'> 
     </div> 
     <span class='caption'>Hello World</span> 
    </div> 
    <div id='ne' class='bg'> 
     <div class='overlay'> 
     <span class='caption'>Hello World</span> 
     </div> 
    </div> 
     <div id='sw' class='bg'> 
     <div class='overlay'> 
     <span class='caption'>Hello World</span> 
     </div> 
    </div> 
     <div id='se' class='bg'> 
     <div class='overlay'> 
     <span class='caption'>Hello World</span> 
     </div> 
    </div> 
    </body> 
</html>

來源

2014-09-21 czmudzin

1）在你的HTML標記時，4個格是不一樣的，改變第一個到另一個：

<div id='nw' class='bg'> 
    <div class='overlay'> 
     <span class='caption'>Hello World</span> 
    </div> 
</div>

2）在你的CSS中，你使用了大寫的ID，在你的HTML中它們處於低位ercase，改變他們：

.bg:hover .overlay { 
    opacity: 1; 
    height:100%; 
}

JSFiddle Demo：

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

3）您只對第一個元素（nw），將其更改爲所有工作寫道：hover。

來源

2014-09-21 02:46:42 dashtinejad

這工作完美，謝謝。覆蓋後有沒有任何方法讓字幕淡入？我不知道如何完成這一點。 – czmudzin 2014-09-21 03:15:29

@czmudzin是的，有可能，看到這[JSFiddle]（http://jsfiddle.net/xzL3bwph/1/）。 – dashtinejad 2014-09-21 03:18:17

CSS懸停圖片說明問題

回答

相關問題