Прозрачный div не работает должным образом

Question

Я пытаюсь добавить div с прозрачным свойством.

.products 
{ 
    width:280px; 
    height:320px; 
    float:left; 
    background:#fff; 
    margin:5px; 
} 
.products:hover 
{ 
    -moz-box-shadow: 0 0 5px 5px #ccc; 
    -webkit-box-shadow: 0 0 5px 5px#ccc; 
    box-shadow: 0 0 5px 5px #ccc; 
} 
.p_desc 
{ 
    height:120px; 
    background:#666; 
    opacity:0.6; 
    filter:alpha(opacity=60); 
} 

HTML-:

<div class="products"> 
       <img src="css/images/products/3m_1440.jpg" /> 
        <div class="p_desc">This is a good product</div> 
       </div> 

Размер изображения 280x320px. Я ожидаю, что класс p_desc будет прозрачным в пределах div products. Но результат будет прозрачным, но не с products, его переполнением!

Answer 1

Дайте position:absolute вашему .p_desc.

написать это:

.products 
{ 
    width:280px; 
    height:320px; 
    float:left; 
    background:#fff; 
    margin:5px; 
    position:relative; 
} 
.p_desc 
{ 
    height:120px; 
    background:#666; 
    opacity:0.6; 
    filter:alpha(opacity=60); 
    position:absolute; 
    bottom:0; 
    left:0; 
    width:100%; 
} 

Answer 2

Пожалуйста, пройти через этот code.I надеюсь, что это решит вашу проблему. http://jsfiddle.net/4hLnZ/12/