마우스 오버시 img 태그 위에 배경 이미지를 이동하는 방법

Question

이제는 성공하지 않고 여러 시간 동안이를 해결하려고 노력하고 있습니다. 다음과 같이 작동하는 CSS를 작성해야합니다. 요구 사항 : http://s22.postimg.org/3xp5ut1gx/needed.jpg 첨부 된 이미지를 사용해야합니다. 오버레이 : http://i.stack.imgur.com/VNK86.png 나는 그것을 자르지 않고 할 수있는 방법을 찾지 못했지만 자르지 않고 그것을해야만합니다. 나는 배경 위치 영역에서 어딘가에 대해 알고 있지만 그렇게 할 수는 없었다. 도움을 주셔서 감사합니다. 코드는 매우 간단합니다 :

<div id="large-box"> 
     <div id="image"><img src="images/101512asiatodaysoftbank1_167x94.jpg" alt="stock-img" id="large-img" /> 
      <div id="play-btn"></div> 
     </div> 
     <p class="large-desc">Billionaries Love These 5 Stocks</p> 
    </div> 

그래서 CSS : 바로 당신을 이해한다면

#large-box { 
overflow: hidden; 
height: 260px; 
width: 293px; 
position:relative;} 

#image { 
height: 230px; 
position:relative; 
} 

#image img{ 
max-width:293px; 
max-height:230px; 
} 

#play-btn { 
background-image:url(../images/play.png); 
background-repeat:no-repeat; 
position:absolute; 
bottom:75px; 
left:10px; 
width:101px; 
height:43px; 
z-index:10; 
cursor: pointer; 
/* display:none; */ 
} 

Answer 1

, 이것이 당신이 찾고있는 무엇을 :로 (http://codepen.io/BenMann/pen/hoyqD

그러나 이미지 재생 버튼)이 완전히 투명하지는 않습니다. 그것도 크지 않아도됩니다. 두 개의 재생 버튼 만 포함하고 여백이 없으면 이미지 크기를 줄일 수 있습니다!

어쨌든 background-position: 0 -290px;으로 조정하여 완벽하게 맞춰보세요. 경우

편집

하면 전체 이미지에서 발생하는 호버 필요, 난 그냥 몇 가지 jQuery를 추가했다. 백그라운드 위치를 설정하는 Class를 토글하는 것만으로도 쉽게 만들 수 있습니다.하지만 아이디어를 얻으실 수 있습니다.