การ Hover แล้วแสดง tab โดยใช้ jquery

<script type="text/javascript" src="https://www.thaicreate.com/js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
	$('#box-opacity').hide();
	$('#box-image').hover(function(){
		$('#box-opacity').show();
	});
	$('#box-image').mouseout(function(){
		$('#box-opacity').hide();
	});
});
</script>
<style>
#box-image { width:515px; height:318px; overflow:hidden; position:relative; border:1px solid #999999; }
#box-opacity { position:absolute; width:100%; bottom:0; padding:10px; text-align:center; background-color:#000000; opacity:0.5; filter:alpha(opacity=50); z-index:99; }
#text { color:#ffffff; z-index:999; }
</style>

<div id="box-image">
	<img src="https://www.thaicreate.com/upload/stock/20130220190650.jpg" />
	<div id="box-opacity"><div id="text">xxxx</div></div>
</div>