如何把这个鼠标滑过图片出现文字修改下

[哎算了]

默认效果就是鼠标滑过图片，文字从下面出来。具体可以看这个地址上的范例。
http://www.17sucai.com/pins/demoshow/10944
请大家修改下滑过，文字从顶部出来、

<style type="text/css">
/* summary */
body,div,h1,h2,h3{margin:0px;padding:0px;}

.listimg1{float:left;width:449px;height:269px;position:relative;overflow:hidden;margin-right:1px;margin-bottom:1px;}
.listimg1 img{background:#333;width:449px;height:269px;top:0;left:0;position:absolute;}
.summary1{background:#ee9825;filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5; }
.summary1{width:449px;height:269px;top:269px;position:absolute;left:0; cursor:pointer;}
.summarytxt1{margin:5px 10px;width:250px;height:auto;line-height:22px;font-size:12px;color:#cfcfcf;}
.summarytxt1 h1{font-size:30px; Font-family:Microsoft Yahei; line-height:20px;color:#ffffff; font-weight:100;margin-left:30px; margin-top:18px;margin-right:10px; width:100px;height:20px; width:20px; float:left;}
.summarytxt1 h2{font-size:18px; Font-family:Microsoft Yahei; line-height:20px;color:#ffffff; font-weight:100;margin-top:20px; width:100px;height:20px;letter-spacing:2px;float:left;}
.summarytxt1 h3{font-size:14px; Font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:100; line-height:20px;color:#ffffff;margin-top:1px; height:20px; margin-left:60px; width:100px;}
</style>

<!--#include file="top.asp" -->
<script type="text/javascript">
$(document).ready(function(){
	$('.listimg1').hover(function(){
		$(".summary1",this).stop().animate({top:'190px'},{queue:false,duration:180});
	},function(){
		$(".summary1",this).stop().animate({top:'269px'},{queue:false,duration:180});
	});
	

	
});
</script>

[哎算了]

大家周末愉快，快下班前帮我看看如何修改，谢谢啊

[Go 旅城通票]

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style type="text/css">
.listbox {background: #F6F6F6;display: inline;float: left;height: 240px;margin-bottom: 20px;margin-right: 20px;padding: 10px;position: relative;width: 260px;}
.listimg {float: left;height: 165px;overflow: hidden;position: relative;width: 260px;}
.listimg img {background: #333333;height: 165px;left: 0;position: absolute;top: 0;width: 260px;}
.summary {left: 0;position: absolute;top: -999px;width:260px;background:#333;}
.summarytxt {color: #CFCFCF;font-size: 12px;height: auto;line-height: 22px;margin: 5px 10px;width: 250px;}</style>
<div class="common">
	<ul>
		<li class="listbox mr20">
			<div class="listimg">
				<a href="/"><img alt="图片特效,网页特效,js特效,jquery特效" class="attachment-thumbnail wp-post-image" src="http://www.17sucai.com/preview/11329/2015-06-18/%E9%80%82%E5%90%88%E5%81%9A%E5%9B%BE%E7%89%87%E7%B1%BB%E7%BD%91%E7%AB%99%E7%9A%84%E7%89%B9%E6%95%88/images/260x165.jpg"></a>
				<div class="summary">
					<div class="summarytxt">
						<p>适合做图片类网站的特效，鼠标经过弹出标题，效果很不错</p>
					</div>
				</div>
			</div>
			
		</li>
		<li class="listbox mr20">
			<div class="listimg">
				<a href="/"><img alt="图片特效,网页特效,js特效,jquery特效" class="attachment-thumbnail wp-post-image" src="http://www.17sucai.com/preview/11329/2015-06-18/%E9%80%82%E5%90%88%E5%81%9A%E5%9B%BE%E7%89%87%E7%B1%BB%E7%BD%91%E7%AB%99%E7%9A%84%E7%89%B9%E6%95%88/images/260x165.jpg"></a>
				<div class="summary">
					<div class="summarytxt">
						<p>适合做图片类网站的特效，鼠标经过弹出标题，效果很不错<br />222</p>
					</div>
				</div>
			</div>
			
		</li>
	</ul>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var h;
        $('.listimg .summary').each(function () { h = $(this).outerHeight(true); $(this).data('h', h).css('top', -h); });

        $('.listimg').mouseenter(function () {
            $(".summary", this).stop().animate({ top: '0' }, { queue: false, duration: 180 });
        }).mouseleave(function () {
            h = -$(".summary", this).data('h');
            $(".summary", this).stop().animate({ top: h }, { queue: false, duration: 180 });
        });
    });
</script>