고수님들 도와주세요 ㅠㅠ

css와 jquery를 좀 활용하면 될듯합니다.

http://police.kpa.co.kr/
여기 하단 배너 마우스 올린것처럼 말씀하시는듯 하네요...
일단 png 로 이미지 만들고 css 로 hover 할경우 오버 이미지를 display:block 시켜주면 간단히 됩니다..
위 사이트 개발자도구로 분석해보세요~

http://tangttuk.com/bbs/board.php?bo_table=mainmenu
요런거요?? 소스보기하셔서 script, html, css 잘 분석해보세요.
스크립트는

<script type="text/javascript">
$(function(){
$(".gall_href").mouseenter(function(){
var idx = $(".gall_href").index(this);
$(".gall_cover").hide().eq(idx).show();
$(".gall_over").hide().eq(idx).show();
}).mouseleave(function(){
var idx = $(".gall_href").index(this);
$(".gall_cover").hide();
$(".gall_over").hide();
});
$("#bo_cate_on").append("<img src='/images/img_category_on.jpg'>");
$("#bo_cate a").css("width","360px")
})

</script>

요 부분만 사용됩니다.

#img1 {display:block;width:100px;height:100px;padding:0;margin:0;}
#img1 a:hover{width:100px;height:100px;padding:0;margin:0;filter:alpha(opacity=50);opacity: 0.5;-moz-opacity:0.5;background:url('위에 올라갈 png이미지경로와 파일명');}
으로 스타일정의하고
<div id="img1"><img src="원래이미지 경로"></div>

해보시기 바랍니다.
갯수가 여러개일 경우에는
#img2
#img3
이런식으로 정의를 늘려주시면 되겠네요 ^^

팁 감사합니다-!