캡션이있는 jquery hover 오버레이

Question

내 포트폴리오에서 캡션을 사용하여 호버 오버레이 효과를 얻고 싶습니다. 기본 탐색 메뉴를 사용하여 작업 목록을 표시하고 있는데 특정 참조 (링크가있는 이미지) 위로 마우스를 이동하면 검정색 오버레이가 표시됩니다.

지금까지 이건 분명히 내 링크를 방해하기 때문에 단순한 호버 오버레이 일 뿐이고 캡션이 올바르게 통합 된 것처럼 보이지 않습니다. 또한 fadeIn 전환은 현재 거의 존재하지 않습니다.

THE HTML 

<section id="portfoliowrapper"> 
<nav> 
<ul class="colum3"> 
     <li><a href="portfolio_detail.aspx" title=""><img src="/images/webraket_single_item.jpg" alt="webraket_single_item" /></a></li> 
     <li><a href="portfolio_detail.aspx" title=""><img src="/images/businesscards_single_item.jpg" alt="businesscards_single_item" /></a></li> 
     <li><a href="portfolio_detail.aspx" title=""><img src="/images/webraket_single_item.jpg" alt="webraket_single_item" /></a></li> 

</ul> 
</nav><!-- //navcontainer --> 
</section><!-- //portfoliowrapper--> 

MY CSS 

#portfoliowrapper { float: left;} 
#portfoliowrapper nav .colum3 { float: left;} 
#portfoliowrapper nav .colum3 a img { } 
#portfoliowrapper nav .colum3 li {float: left;width: 253px;height: 220px;margin-right: 10px;margin-bottom: 10px; background: #555; } 
#portfoliowrapper nav .colum3 li:last-child { margin-right: 0px;} 

THE J 

<script> 
    $(document).ready(function() { 
    $('.colum3 li a').bind('mouseover', function() { 

     $(this).parent('li').css({ position: 'relative' }); 
     var img = $(this).children('img'); 
     $('<div />').text(' ').css({ 
      'height': img.height(), 
      'width': img.width(), 
      'background-color': '#000', 
      'position': 'absolute', 
      'top': 0, 
      'left': 0, 
      'opacity': 0.6 
     }).bind('mouseout', function() { 
      $(this).fadeOut('fast', function() { 
       $(this).remove(); 
      }); 
     }).insertAfter(this).animate({ 
      'opacity': 0.6 
     }, 'fast'); 

    }); 

}); 
</script> 

내가 참조 위로 마우스를 가져 검은 색 오버레이 자막과 함께 제공, 나는 특정 기준에 가서 사진을 클릭 할 수 있습니다.

Answer 1

대신에 a를 사용하면 링크를 방해하지 않는 태그 안에 태그를 삽입 할 수 있습니다. span css를 "display : block"으로 설정하십시오.

가능하면 마크 업에 캡션을 작성한 다음 마우스 오버가 발생할 때까지 CSS를 통해 캡션을 숨기는 것이 좋습니다. 마우스 오버 시마다 DOM 요소를 만들고 제거하는 것보다 빠릅니다.

Answer 2

이제 시작합니다. 오버레이 텍스트 비트를 사용하여 오버레이 div를 버리고 이미지 자체를 페이드 처리합니다. 배경이 어둡거나 검은 색이면 같은 모양입니다.

http://jsfiddle.net/g6xVR/1/

Answer 3

이 시도 : jsfiddle

이 오버레이에 표시 할 제목 속성을 사용합니다. 이미지 경로는 전체 경로가 아니므로 바이올린은 이미지를 표시하지 않으므로 완벽하지는 않습니다.하지만 아이디어는 얻을 수 있습니다.