css
.MainImagescat { margin:53px 0 0 697px; }
.MainImagescat div { margin-bottom:29px; }
.MainImagescat div a { position:relative; display:block; width:268px; height:128px; background:url(./img/mainimages.png) 0 0 no-repeat; font-size:12px; color:#a8b0c5; text-transform:uppercase; }
.MainImagescat div a img { margin:2px 0 0 3px; position:absolute; }
.MainImagescat div a span.name { position:absolute; margin-left:3px; display:block; bottom:6px; height:0; overflow:hidden; width:260px; line-height:26px; background:url(./img/shadow1.png) 0 0 repeat; }
.MainImagescat div a span.name span { padding-left:10px; }
js
$(«.MainImagescat a»).hover(function(){
$(this).find(«span.name»).stop().animate({«height»:26});
}, function(){
$(this).find(«span.name»).stop().animate({«height»:0});
});
html
<div class=»MainImages»>
<div><a href=»#»><img border=»0″ src=»<?=$path_to_img?>» width=»160px» height=»150px» alt=»<?=$arFields[«NAME»];?>» title=»<?=$arFields[«NAME»];?>» /><span class=»name»><span> <?=$arFields[«CATALOG_PRICE_1»];?></span></span></a></div>
</div>