호버에서 오버레이 이미지를 적용하고 싶습니다.

Question

하지만 고생하고 있습니다.

 
#gallery img:hover { 
    width:700px; 
    height:213px; 
    position: relative; 
    z-index:10000; 
    background: transparent url(../images/imgOverlay-Zoom.png) no-repeat center center; 
} 

작동겠습니까 ...

 
#gallery img { 
width:700px; 
height:213px; 
margin:0; 
padding:0; 
} 

그래서 내가 생각,하지만 나던 : 나는 CSS를 위해 가지고

코드입니다.

내가 투명 호버에 오버레이 오전 이미지입니다 : 내가 잘못 뭐하는 거지

. 어딘가에 손상된 CSS 태그가있을 수 있습니다.

도움을 주시면 감사하겠습니다.

Answer 1

수정 됨. CSS :

 
#container { position:relative; width:700px; height:213px;} 
    .image { position:absolute; width:700px; height:213px; z-index:0;} 
    .overlay { background-image:none); position:absolute; width:700px; height:213px; z-index:1;} 
    .overlay:hover { background: transparent url(images/imgOverlay-Zoom.png)no-repeat center center;} 

HTML :

<div class="overlay" ></div> 
<div class="image" ><img src="images/listing-page-with-gradient.png" /></div> 

Answer 2

#gallery에 이미지 태그가없는 대신 배경 이미지가 있어야합니다. 그렇지 않으면 배경 위에 표시됩니다. 그런 다음 :hover 가상 클래스가있는 다른 div를 안에 넣으십시오. 그래도 문제가 해결되지 않으면 transparent이라는 단어를 삭제하십시오.

이미지를 오버레이하여 결합 된 이미지의 원본 이미지를 바꿀 수 없습니까?

Answer 3

안녕하세요 거기 나는 당신이 CSS의 메커니즘을 오해 한 것 같아요 : 이미지 자체가 개체이며 지정된 배경이 뒤에 있습니다. 그래서 투명하지 않은 이미지를 배경으로 만들고 src에 투명한 이미지를 지정해야합니다. 그러나 이것은 귀하의 필요에 부합하지 않을 것입니다. CSS를 사용하면 문제가 될 수 있으므로 CSS 호버 또는 javascript onMouseover 또는 jQuery를 사용하여 전체 이미지를 바꿀 것을 제안합니다. 올바른 방법이므로 해당 이미지와 함께 familliar를 얻으십시오.