Как изменить наложение всего div на изображение с помощью CSS

Question

Я пытаюсь выяснить, как иметь два divs, которые будут реагировать на событие onmouseover. Нужно наложить изображение другим, тогда как нижний div должен содержать другое изображение и другие элементы, такие как кнопки, текст и т. Д. Не могли бы вы показать мне, как мне нужно настроить свой код, чтобы он работал?

HTML:

<div id="container">  
    <div id="bottom" > 
     <img id="image" src="http://curiousanimals.net/wp-content/uploads/2008/04/cat-programmer.jpg"/> 
     <p id="text"> 
      Hello World! 
     </p> 
    </div> 
    <div id="top"> 
     <img id="cat" src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" /> 
    </div> 
</div> 

CSS:

#container img { 
    position:absolute; 
    height:400px; 
    width:400px; 
    left:0; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 
#top img:hover { 
    opacity:0; 
} 
#text{ 
    z-index:100; 
    position:absolute;  
    color:white; 
    font-size:24px; 
    font-weight:bold; 
    left:150px; 
    top:350px; 
} 

Это то, что я получил до сих пор. Но мне нужно отображать мир Hello только тогда, когда отображается нижнее изображение. Также, если бы у меня была какая-то кнопка, чтобы заставить ее реагировать только в этих ситуациях.

http://jsfiddle.net/L7XCD/733/

Answer 1

Самый простой способ, если вы просто хотите использовать элементы, находящиеся в нижней части элемента, - это просто переключить верхний и нижний слои. Таким образом, вы делаете свой верхний слой (включая кнопку и текст) прозрачным и накладываете поверх видимого изображения. При наведении на него вы просто вставляете его. Если вы делаете это, то наоборот, верхнее изображение блокирует клики. я поставил маленький пример здесь вместе:

http://jsfiddle.net/L7XCD/732/

HTML:

<div class="container">  
<div class="cat-image bottom"> 
    <img class="cat" src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" /> 
</div> 
<div class="cat-image top" > 
    <img class="image" src="http://curiousanimals.net/wp-content/uploads/2008/04/cat-programmer.jpg"/> 
    <p class="text"> 
     Hello World! 
    </p> 
    <button>Click meow!</button> 
</div> 

CSS:

.top { 
    position: relative; 
    opacity: 0; 

    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

.top:hover { 
    opacity: 1; 
} 

.bottom { 
    position: absolute; 
    top: 0; 
} 

Answer 2

#top { 
    z-index: 10; 
    position: relative; 
} 

#bottom #text { 
    z-index: 1; 
} 

Это должно сделать трюк.