페이드 효과가있는 이미지 가리 키기 - 가운데 정렬 유지

위치 절대 값을 사용하지 않고 이미지를 마우스로 가리키고 다른 위치로 바꿀 수있는 방법이 있습니까?페이드 효과가있는 이미지 가리 키기 - 가운데 정렬 유지

지금 내 이미지의 중심은 span (display: block;)이며 text-align: center;입니다. 이는 괜찮습니다.

는 I JQuery와 함께 이들 문서에 토글 이미지를 추가하여 여러 해결책을 시도 :

$("span.image_hover").hover(function() { 
    $(this).find("img:not(.secondary)").stop(true, true).fadeOut(); 
    $(this).find("img.secondary").stop(true, true).fadeIn(); 
    }, function() { 
    $(this).find("img:not(.secondary)").stop(true, true).fadeIn(); 
    $(this).find("img.secondary").stop(true, true).fadeOut(); 
    });

이 해결책의 문제는 이미지에 절대 따라서 중심 위치를 파괴 위치를 필요로한다는 것이다 - 이것은 웹 사이트가 반응 형이며 이미지의 크기가 화면 중앙에 있지 않고 왼쪽에있는 문제입니다. 이미지의 크기가 조정되고 최대 너비 (240 픽셀)로만 사용됩니다.

어쨌든 이미지를 인라인하거나 중심에 배치하는 동안이 전환을 수행 할 수 있습니까?

이미지의 URL을 알아낼 수 없습니다. 이미지에 _off/_on을 추가하는 것은 불가능합니다. 그것들은 서버에서 생성되어 문서에서 사용하기 위해 변수로 전송됩니다.

출처

2013-04-26 janhartmann

... 이미지가 절대 요소의 하위 인 일반 흐름의 래퍼에 포함되어 있는지 궁금합니다. 그렇다면 당신은 그것을 중심으로 유지할 수 있습니다. 미안 포인트를 놓치면 ... – Fico

HTML과 CSS를 게시하십시오. 더 나은 방법은 jsFiddle 예제를 사용하는 것입니다. – j08691

창 크기를 조정할 때 이미지 크기를 알지 못합니다. 이미지 크기가 맞습니다. :-) – janhartmann

aaarrrh! max-width: 240px을 span.image_hover에 추가하여 수정할 수 있습니다.

출처

2013-04-26 19:02:54 janhartmann

페이드 효과가있는 이미지 가리 키기 - 가운데 정렬 유지

답변

관련 문제