Наведите div на другой div с некоторой непрозрачностью, используя css

Question

Мое требование состоит в том, чтобы получить div, перекрывающий другой div внизу, как вы можете видеть на первом снимке, и когда вы наведите курсор на изображение, мне нужно его, чтобы получить как во втором изображении.

Вот мой HTML-код, но я не знаю, как правильно обрабатывать события мыши.

<div id="container"> 
    <div class="overlay">This is overlay div.</div> 
    <div class="content">This is contents div. This is contents div.</div> 
</div> 


#container { 
    position: relative; 
} 

.overlay, 
.content{ 
    display:block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 



.overlay, 
.content{ 
    display:block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Но он не работает так, как я хотел. Может ли кто-нибудь дать мне несколько предложений?

Answer 1

http://jsfiddle.net/mAzsL/

Здесь я идти человек.

<div class="container"> 
    <div class="lower">Blah Blah Blah</div> 
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat elit vel tortor porta, sit amet venenatis purus condimentum. Suspendisse potenti. Aenean ultrices velit ac mattis volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div> 
</div> 

.container{ 
    width:250px; 
    height:300px; 
    background:#00f; 
    position:relative; 
} 

.lower{ 
    position:absolute; 
    bottom:0; 
    width:100%; 
    color:#fff; 
    padding:10px 0; 
    text-indent:5px; 
    background:rgba(0,0,0,.5); 
} 

.show{ 
    display:none; 
    height:100%; 
    width:100%; 
    color:#000; 
    text-indent:5px; 
    background:rgba(255,255,255,.5); 
} 

.container:hover > .lower{ 
    display:none; 
} 

.container:hover > .show{ 
    display:block; 
} 

Здесь есть скрипка того же, но с содержанием, скользящим на место. Я добавил это, потому что SiKni8 спросил, почему он не скользит вверх.

http://jsfiddle.net/mAzsL/15/

По существу, я переехал все содержимое в один контейнер, добавлен переход на парении. Довольно простые изменения.

Answer 2

что-то вроде

<div class="container"> 
    <img src="http://placehold.it/150X200/fff000" /> 
    <div class="inner"> 
     somecontent goes here 
     <div class="overlay">sho on hover</div> 
    </div> 
</div> 

и

.container { 
    position: relative; 
    display: inline-block; 
} 
.container .inner { 
    position: absolute; 
    bottom: 0; 
    opacity: .85; 
} 
.container .inner .overlay { 
    display: none; 
} 
.container:hover .inner .overlay { 
    display: block; 
} 

Демо: Fiddle