CSS의 호버에 이미지 캡션이 희미 해짐

Question

내 포트폴리오에서 작업 중이며 내 이미지 미리보기 이미지에 멋진 것들을했습니다. 이제 호버 캡션이 호버에서 페이드 인/아웃되도록하고 싶습니다.

이것은 지금까지 제 코드입니다. HTML :

<a href="1.jpg" class="mask"><img src="1.jpg" /> 
     <span class="caption fade-caption"> 
     <h3>Fade Caption</h3> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
     </span> 
    </a> 

CSS는 :

.mask { 
    position:relative; 
    height:180px; 
    width:240px; 
    -webkit-box-shadow:0 0 1px #000; 
    border:5px solid #f6f6f6; 
    overflow:hidden; 
    float:left; 
    margin:15px; 
} 
.mask img { 
    position:absolute; 
    height:300px; 
    width:400px; 
    -webkit-transform: rotate(15deg); 
    -moz-transform:rotate(15deg); 
    -o-transform:rotate(15deg); 
    -ms-transform:rotate(15deg); 
    transform:rotate(15deg); 
    top:50%; 
    left:50%; 
    margin-top:-150px; /* half the height */ 
    margin-left:-200px; /*half the width */ 
} 

.mask:last-child { 
    margin-right:0px; 
} 

.mask .caption { 
    background-color: rgba(222,169,188,0.9); 
    position: absolute; 
    color: #fff; 
    z-index: 100; 
    left: 0; 
} 

.mask .fade-caption { 
    opacity: 0; 
    width: 220px; 
    height: 180px; 
    text-align: left; 
    padding: 4px 20px 4px 15px; 
    display:none; 
    font-size:0.8em; 
} 

.mask:hover .fade-caption { 
    opacity: 1; 
    display:inline; 
     width: 220px; 
     height: 180px; 
-webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
    } 

나는 페이드 자막 클래스를 추가하고의 전환을 넣어 필요하다고 생각 : 상태를 가져,하지만 분명히 그건 옳지 않아. 나는 전환에 대해 아직 숙련되지 않았기 때문에 내 문제를 해결하는 데 도움이되는 튜토리얼을 찾을 수 없기 때문에 누군가가 나를 도울 수 있기를 바라고 있습니다.

Answer 1

꽤 가까웠습니다. 작업 예제는 this fiddle을 확인하십시오. 아래 전체 CSS는 :

.mask { 
    position:relative; 
    height:180px; 
    width:240px; 
    box-shadow:0 0 1px #000; 
    border:5px solid #f6f6f6; 
    overflow:hidden; 
    float:left; 
    margin:15px; 
} 
.mask img { 
    position:absolute; 
    height:300px; 
    width:400px; 
    top:50%; 
    left:50%; 
    margin-top:-150px; /* half the height */ 
    margin-left:-200px; /*half the width */ 
    -webkit-transform: rotate(15deg); 
    -moz-transform:rotate(15deg); 
    -o-transform:rotate(15deg); 
    -ms-transform:rotate(15deg); 
    transform:rotate(15deg); 
} 

.caption { 
    background-color: rgba(222,169,188,0.9); 
    position: absolute; 
    color: #fff; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    padding: 4px 20px 4px 15px; 
    font-size:0.8em; 
    opacity: 0; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 

.mask:hover .caption { 
    opacity: 1; 
} 

중요한 것은, transition 스타일은 요소 자체뿐 아니라 그 :hover 상태에 있습니다. 그렇게하면 페이드 인 및 페이드 아웃이 모두 이루어집니다. 이러한 스타일이 단지 :hover 인 경우, 요소는 페이드 인되지만 페이드 아웃보다는 즉시 사라집니다.

display: none과 display: block/whatever 사이를 전환 할 수 없습니다. 따라서이 경우 opacity을 캡션을 시각적으로 숨기는 부분으로 설정해야합니다. 독점적 인 ms 필터를 추가하여 이전 IE 지원을받을 수 있습니다.

다른 점은주의해야 :

1. 나는 간단하게하기 위해 당신의 .caption 및 .fade-caption 클래스를 통합.
2. 이미 변경된 사항을 다시 말해야 만합니다.
3. box-shadow에 접두사가 더 이상 필요하지 않습니다. 최종 버전 만 사용하십시오.
4. 자막 위치 지정에 다소 혼란 스럽지만 absolute이되고 width 및 height으로 설정되었습니다. 간단히하기 위해 나는 네 개의 모든 값을 0으로 설정했습니다.
5. 여기에 z-index을 선언 할 필요는 없으며 브라우저의 일반 스태킹 순서로 정렬 할 수 있습니다. 당신이 비록 마크 업에서 이미지 전에 캡션을 배치해야하는 경우이 다시 추가해야합니다. 당신의 전환 일 현재 없습니다

Answer 2

이유를 당신이 기대하는 것은합니다 (display 속성이 자막의 none에서 inline으로 이동하면 opacity이 전환되는 것을 방지하고 변경하기 전에 (예 : 마우스를 가리기 전 - 일반 상태에서) 요소에 전환을 적용해야합니다. opacity에 전적으로 의존하는 것은에서 캡션을 페이드 아웃은 치료를 작동합니다 :

.mask .fade-caption { 
    opacity: 0; 
    width: 220px; 
    height: 180px; 
    text-align: left; 
    padding: 4px 20px 4px 15px; 
    font-size:0.8em; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 

.mask:hover .fade-caption { 
    opacity: 1; 
    width: 220px; 
    height: 180px; 
} 

http://jsfiddle.net/g9NFV/

편집 : Ninja'd를,하지만 지금은 어쨌든 여기이 대답을하겠습니다.