CSS Hover Подпись Выпуск

У меня есть мой сайт фон отделен на 4 див так что каждый из них берут до 25% страниц
Цели состоит в том, чтобы иметь наложение замирания в том, когда парил над (который я применил к первому изображению - #nw)CSS Hover Подпись Выпуск
проблема заключается в том, что я не могу получить текст из класса .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 вы использовали идентификатор с прописными буквами, в своем HTML они находятся в низком ercase, изменить их:

#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) Вы написали hover только для первого элемента (nw), изменить его на работу для всех:

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

JSFiddle Demo.

источник

2014-09-21 02:46:42 dashtinejad

Это сработало отлично, спасибо. Есть ли способ, чтобы заголовок исчезал после наложения? Я не знаю, как это сделать. – czmudzin

@czmudzin Да, это возможно, см. Это [JSFiddle] (http://jsfiddle.net/xzL3bwph/1/). – dashtinejad

CSS Hover Подпись Выпуск

ответ

Смежные вопросы