Как сверстать подобную сетку товаров

.pro{ 
 width: 270px; 
 height: 102px; 
 padding: 5px; 
 float: left; 
 border: 1px solid #FFFFFF; 
 margin: 0 30px 30px 0;
 position: relative;
} 

.pro:hover{ 
 background: #f4f1e0 url(images/pro-bg.jpg) top repeat-x; 
 border: 1px solid #e5e0cc; 
 border-radius: 15px;
 z-index: 100;
 height: auto;
 }

/*Блок с описанием*/
.pro p{display:none}
.pro:hover p{display:block}

Это навскидку

dma84, получается такая штука:

На коленке

wwwwww, а какое отношение это имеет к вёрстке? Мне надо css правильно настроить, чтоб всё не кривилось при наведении. А потом уже можно скрипты привязывать, для той же плавности..

.pro{/* обертка */

width: 270px;

height: 102px;

padding: 5px;

float: left;

border: 1px solid #FFFFFF;

margin: 0 30px 30px 0;

position: relative;

}

.pro .descr:hover{

background: #f4f1e0 url(images/pro-bg.jpg) top repeat-x;

border: 1px solid #e5e0cc;

border-radius: 15px;

z-index: 100;

height: auto;

}

/*Блок с описанием*/

.pro .desc {position:absolute}

.pro .descr p{display:none}

.pro .descr:hover p{display:block}

Даже не уверен в работоспособности

Вариант

html

<ul>

	<li>

	<div class="wrap">

	<div class="cont">minimal content minimal content minimal  

	</div>

	</div>

	</li>

<li>

	<div class="wrap">

	<div class="cont">minimal content minimal content minimal  

	</div>

	</div>

	</li>

<li>

	<div class="wrap">

	<div class="cont">minimal content minimal content minimal  

	</div>

	</div>

	</li>

</ul>

css

 li {

	height:100px;

	width:200px;

	float:left;

	overflow:hidden;

	margin:10px;

	border:2px solid green;

	border-radius:15px;

	background:#fff;

	position:relative;

	

}

 li div {

	border-radius:15px;

	

	position:relative;

	padding:10px;

}

 li .wrap{

	                                                                                              

}

 li:hover {

	overflow:visible

}

 li:hover .wrap {

	z-index:100;

	border-radius:15px;

	width:250px;

	height:200px;

	background:#eed0ad;

	z-index:1;

	position:relative;

	top:-10px;

	left:-10px;     

	border:2px solid #000;  

	padding:20px;

}

вроде работает - остальное допиливай уже сам :)

Спасибо всем, тему можно закрыть.