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悬停图片说明问题

回答

相关问题