Image hover

Kode 

.item .product{
	width:228px;
	float:left;
	border:1px solid #d7d7d7;
	padding:17px 0 17px 0;
	margin:0 10px 8px 0;
	position:relative;
	overflow:hidden;
}
.item .product .prod-info{
	position:absolute;
	bottom:-70px;
	background:#727171;
	margin: 0 10px 0 8px;
	width:186px;
	padding:8px 10px 7px 14px;
}
*+html .item .product .prod-info{
	padding-bottom:0;
}

Jeg synes lige at du skulle have en hånd, så jeg kastede lige hurtigt et script sammen til dig..


http://livedemo00.template-help.com/zencart_36753/includes/templates/theme572/jscript/jscript_zhover-image.js

og CSS er noget af det her:

Kode 

.item .product{
	width:228px;
	float:left;
	border:1px solid #d7d7d7;
	padding:17px 0 17px 0;
	margin:0 10px 8px 0;
	position:relative;
	overflow:hidden;
}
.item .product .prod-info{
	position:absolute;
	bottom:-70px;
	background:#727171;
	margin: 0 10px 0 8px;
	width:186px;
	padding:8px 10px 7px 14px;
}
*+html .item .product .prod-info{
	padding-bottom:0;
}

Søg efter noget med CSS3 hover effect transition på google Tror du kan finde noget lignende, ellers så undersøg hvad de forskellige CSS3 indstillinger gør