Transparent div not working properly

Question

I am trying to add a div with transparent property .

.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);
}

The HTML :

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

Image size is 280x320px . I am expecting the class p_desc to transparent within div products .But result is its transparent but not withing the products,its overflowing !

Answer 1

Please go through this code.I hope it'll solve your problem. http://jsfiddle.net/4hLnZ/12/

Answer 2

Give position:absolute to your .p_desc.

write this:

.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%;
}