상단 배경 이미지 (CSS 사용)

나는 위에 물건을 올려 놓을 때 내 제품 이미지 위에 표시하고 싶은 이미지가 있습니다.상단 배경 이미지 (CSS 사용)

이 내가 사용하고 무엇을 :

.centerBoxContentsFeatured img:hover { 
    background-image:url('http://i47.tinypic.com/vz2oj.gif'); 
    }

그것은 작업을 수행하지만이 제품 이미지 대신 뒤에 그 위에 표시되는 것. 절대 위치 지정 및 Z- 인덱스를 시도했지만 아무 것도 작동하지 않는 것 같습니다.

http://www.pazzle.co.uk - 기본 페이지의 이미지에 적용하려고합니다. < <

편집 :

#featuredProducts.centerBoxWrapper { 
    position: relative; 
    } 
#featuredProducts.centerBoxWrapper:hover:before { 
    content: ''; 
    width: 187px; 
    height: 179px;; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-image:url('http://i47.tinypic.com/vz2oj.gif'); 
}

출처

2012-10-24 Lewis

a { 
    display: block; 
    position: relative; 
    width: 100px; 
    height: 100px; 
} 
a:hover:before { 
    content: ''; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-image:url('http://i47.tinypic.com/vz2oj.gif'); 
}

Demo

이 의사 요소를 사용하여

이 질문을 참조하십시오.

출처

2012-10-24 01:03:09 bookcasey

이것은 내 것보다 나은 대답입니다. 의사 요소는 이런 종류의 일에 정말로 유용합니다! – KaeruCT

고맙습니다. 거의 작동하고 있습니다. 제 편집장에서 OP를 보시기 바랍니다. 이미지는 호버링되는 이미지와 관계없이 한 위치에만 나타납니다. – Lewis

스타일을 잘못된 요소에 적용한 것처럼 보였습니다. 귀하의 웹 사이트를 살펴 보았습니다. 나는 당신이 그것들을'.centerBoxContentsFeatured'에 적용해야한다고 생각합니다. – KaeruCT

어떻게해야 정확히 무엇을하고있어. 배경이기 때문에 컨테이너 내용 뒤에 표시됩니다.

여기서해야 할 일은 당신이 떠오르게하는 이미지 위에 div를 오버레이하는 것입니다. 이것이 순수한 CSS 솔루션으로 가능하다고 생각하지만 일부 자바 스크립트에서는 더 쉬울 수도 있습니다. on hover overlay image in CSS

출처

2012-10-24 01:02:43 KaeruCT

상단 배경 이미지 (CSS 사용)

답변

관련 문제