Overflow problem

[Fr33z]

Hi guys!

i've a problem with my overflow of 2 div's.

I want to be the product div holding a image, and the productinfo is a black cover. I want the productinfo div to position it down and later i want to use it with CSS3 transition to bring more info.

So with this code, at the moment, my 2nd div (productinfo) keeps visible when i move it down and I want it to be hidden. That why I use (overflow:hidden in my product CSS style.

Can someone help me?

CSS:

.product {
	width: 187px;
	height: 187px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float: left;
	border: 1px solid #000;
	overflow: hidden;
             backrgound-image: ...;
}
.productinfo {
	background-color: rgba(0,0,0,0.7);
	border-radius: 11px;
	width: 187px;
	height: 187px;
	border: 1px solid #000;
	float: left;
	top: 125px;
	position: absolute;
}

and for my HTML

<div class="product">
    <div class="productinfo"></div></div>

Thanks for all the help!!

[COBOLdinosaur]

If you want it hidden then you need to use display:none;

overflow deals with how to handle content when it is too big to fit in its container.

[Fr33z]

No, i think i've explained my problem to bad...

I've seen this example on YouTube... (http://www.youtube.com/watch?v=wZwnBkUDK9Q)

now i've used the CSS3 propetry, opacity, but it doesn't gives the perfect transistion...

Maybe someone can give the CSS style he used for getting the 2nd div positioning on the bottom..

And also, Happy Newyear!!!