CSS 이미지 썸네일 롤오버 내가 이것을 달성하기 위해 노력하고있어

Question

텍스트 표시 이 시점에서 VIEW PROJECT와 파란색 투명 배경이 나타납니다. 이 레이아웃은 응답 display: block;

로 변경 :hover에 다음 <a> 태그의 배경을 IMG와 <a> 태그에 <p> 태그를 배치하고 display: none;를 사용하여 만들기

:

나는 몇 가지 시도 그래서 문제가 발생했습니다. 내 코드는 다음과 같습니다.

HTML :

<a class="work-thumb" href="#"><p class="work-thumb-rollover">view project</p></a> 

CSS :

HTML :

<a class="work-thumb" href="#"><img src="images/work1.jpg" alt="work"><p class="work-thumb-rollover">view project</p></a> 

CSS :

.work-thumb { 
    position: relative; 
} 

.work-thumb img { 
    width: 33%; 
    height: auto; 
    float: left; 
    padding: 0; 
    margin: 0; 
    border: 0; 
    z-index: 1; 
} 

p.work-thumb-rollover { 
    display: none; 
} 

p.work-thumb-rollover:hover { 
    position: absolute; 
    display: block; 
    text-align: centre; 
    width: 100%; 
    background: rgba(54, 25, 25, .5); 
    top: 50%; 
    left: 50%;   
} 

이 하나 나는 또한 HTML과 절대 위치에서 img 태그를 사용하여 시도

a.work-thumb { 
    width: 20%; 
    padding-top: 50%; 
    background-image: url(images/work1.jpg); 
    background-size: cover; 
    -moz-background-size: cover; /* Firefox 3.6 */ 
    background-position: center; 
} 
    /* This code works, the image as the background is responsive */ 

p.work-thumb-rollover { 
    display: none; 
} 

p.work-thumb-rollover:hover { 
    display: block; 
    text-align: centre; 
    width: 100%; 
    background: rgba(54, 25, 25, .5); 
} 

    /* This doesn't seem to work, the width 100% doesn't take the width of it's parent and on rollover no color appears? */ 

, P 태그 너비는 그걸 취하지 않을거야. f 부모이고 상자의 오른쪽 상단에 붙어 있습니다 (top 또는 left 속성에 관계없이).

나는 이것들과 비슷한 것을 시도해 보았고 그것들을 지우고 다시 정사각형으로 돌아갔다. (단지 HTML의 이미지를 CSS없이 처리하고있다.)하지만 이것들을 변형 해 보았다. 그 (것)들을 일하게 할 수 없었다.

아무에게도 빛을 비추거나 이미 사용했거나 볼 수있는 쉬운 해결책을 제공 할 수 있습니까?

Heres an example I made for you

당신은을 얻기 위해

background-color 

background-image 

로 교체해야 할 것 :

Answer 1

당신은 CSS/3 및 HTML 사용하여이 작업을 수행 할 수 결과 youre 후에.

편집 : 을 Heres 업데이트 JSFiddleLink >>

Answer 2

당신은 특정 너비와 높이와 에 사업부에 앵커 태그를 변환 할 수 있습니다 :를 가져 당신이 배경 이미지을 변경할 수 있습니다.사업부는

표시 스타일되어야합니다 : 인라인 블록을

Answer 3

을 나는 귀하의 질문에 올바르게 텍스트를 보여 플러스 호버에 배경 이미지를 변경하려면 이해합니다. 작은 jquery를 사용하여 작업을 해보십시오.

<a class="work-thumb" href="#"><img src="images/work1.jpg" alt="work"><p class="work-thumb-rollover"></p></a> 

$('.work-thumb').hover(function() { 

$('.work-thumb-rollover').text('view project'); 
$('.work-thumb > img').attr('src', 'images/work2.jpg'); 

});