반응 높이 이미지에 호버 효과 적용

Question

세 개의 열 레이아웃이 있습니다. 왼쪽 및 오른쪽 열은 전체 배경 이미지로 마비 효과가 필요합니다. CSS에서 이것을 얻을 수 없어 jQuery를 시도했지만 위치에 관한 문제는 두 요소에서 모두 발생합니다.

이미지에 높이를 넣어야하지만 응답 성이 있어야합니다. 나는 상대적인 위치를 시도했지만, 지금은 떠오르게 될 때 눈에 띄는 점프가있다. 여기 내 바이올린입니다 :

여기 http://jsfiddle.net/faumX/4/

내 코드의 예는, HTML :

<div class="one-third"> 
     <div class="bg-image"> 
      <img src="http://placehold.it/429x900&text=left+up" id="leftUp" /> 
      <img src="http://placehold.it/429x900&text=left+over" id="leftOver" style="display:none;" /> 
     </div> 
    </div> 

CSS :

.one-third { 
    display:inline; 
    float:left; 
    width:33.332%; 
    max-width: 420px; 
    position: relative; 
    min-height:10px; 
    height:auto; 
    max-height:900px; 
    overflow:hidden; 
} 
.bg-image { 
    position: relative; 
    min-height:10px; 
    height:auto; 
    max-height:900px; 
    overflow:hidden; 
} 
.bg-image img { 
    display: block; 
    width: 100%; 
    max-width: 420px; 
    min-height:10px; 
    height:auto; 
    max-height:900px; 
    overflow:hidden; 
} 
#leftUp { 
    position:relative; 
    top:0; 
    left:0; 
} 
#leftOver { 
    position:relative; 
    top:0; 
    left:0; 
} 

JS :

$('#leftUp').mouseenter(mouseEnterLeft); 
$('#leftOver').mouseleave(mouseLeaveLeft); 
var mouseEnterLeft = function(){ 
    $('#leftUp').fadeOut(); 
    $('#leftOver').fadeIn(); 
} 
var mouseLeaveLeft = function(){ 
    $('#leftUp').fadeIn(); 
    $('#leftOver').fadeOut(); 
} 

나는이 사실에 대해 새롭게 느껴졌습니다. 더 좋은 CSS 해결책이 있다면, 나는 어떤 제안이라도 열어두고 있습니다.

도움 주셔서 감사합니다.

Answer 1

나는 당신의 피들에서 몇 가지를 바꿨다. 문제가 사라지면 사라지고 불투명도가 더 좋다.

오버레이 이미지를 기본 이미지 위에 놓고 절대 값으로 설정 했으므로이 방법으로 오버레이되지만 시작시 숨겨집니다.

커서를 놓을 때 사라지기 때문에 초점이 이미지가 아닌 상위 div에 있습니다. 그걸로 놀아보고 내가 한 일을 이해할 수 있는지 확인하십시오.이게 당신이 찾고있는 것이라면 알려주세요.

$(document).ready(function(){ 
$('#rightUp').mouseenter(mouseEnterRight); 
$('#rightOver').mouseleave(mouseLeaveRight); 
$('#left').mouseenter(mouseEnterLeft); 
$('#left').mouseleave(mouseLeaveLeft); 

}); var mouseEnterRight = function() { $ ('# rightUp'). fadeOut(); $ ('# rightOver'). fadeIn(); } var mouseLeaveRight = function() { $ ('# rightUp'). fadeIn(); $ ('# rightOver'). fadeOut(); } var mouseEnterLeft = function() { $ ('# leftUp'). animate ({opacity : 0}); $ ('# leftOver'). fadeIn(); } var mouseLeaveLeft = function() { $ ('# leftUp'). animate ({opacity : 1}); $ ('# leftOver') .fadeOut(); }

http://jsfiddle.net/faumX/14/