페이드 이미지 출력 및이 내가 일하고 있어요 웹 사이트입니다 롤오버

Question

에 텍스트를 페이드 : http://threesamples.tumblr.com

내가 가장 바보 같은 문제가 있어요,하지만 난 시도 아무것도 작동하는 것 같다, 그래서 나는 거라고 생각 여기와.

캡션을 지원하지 않는 Tumblr 테마로 작업하고 있습니다 (이미지 자체를 클릭하면 제외).

는 은 내가 롤오버에 있도록 사진의 상단 중앙에 사업부 내부의 캡션 텍스트를 배치한다 할 노력하고있어

: - 사진 페이드 아웃 - CSS의 텍스트가 여기에

페이드입니다

article.type_photo .photo-stage { 
     background: {color:Photo Background}; 
     position: absolute; 

    } 

    article.type_photo .photo-stage:hover { 
     background: {color: BackgroundColor}; 
     opacity: 0.5; 
     transition: 0.75s; 
     -moz-transition-duration:0.75s; 
     -webkit-transition-duration:0.75s; 
     -o-transition-duration:0.75s; 
    } 

    article.type_photo .caption-wrap { 
     background: transparent; 
     width:720px; 
     height:300px; 
     padding-top:10px; 
     position: relative; 
     margin: 0 auto; 
     float: left; 

    } 

    article.type_photo .caption { 

     visibility: hidden; 
     position: absolute; 
     margin: 0 auto; 
    } 


    article.type_photo .caption:hover { 

    visibility: visible; 
    position: absolute; 
    color: #ffffff; 
    opacity: 1; 
    font-family:"Open Sans"; 
    font-size:14px; 
    text-align: justify; 
    transition: 0.75s; 
    -moz-transition-duration:0.75s; 
    -webkit-transition-duration:0.75s; 
    -o-transition-duration:0.75s; 

    } 

을 여기에 사진 게시물 처리에 대한 텀블러 코드 : 지금까지있어

{block:Photo} 

     <!-- Photo Post --> 


     <div class="photo-stage {select:Image Height}"> 

     <div class="photo-wrap" style="background-image: url('{PhotoURL-HighRes}');"> 
       {block:IndexPage} 
        <a href="{Permalink}" title="{Title}"><img src="{PhotoURL-HighRes}" /></a> 

     </div> 
       {/block:IndexPage} 
       {block:PermalinkPage} 
       {LinkOpenTag}<img src="{PhotoURL-HighRes}" />{LinkCloseTag} 
       {/block:PermalinkPage} 

     </div> 
     </div> 


<div class="caption"> 
       {block:Caption} 
       {Caption} 
       {/block:Caption} 
        {block:Caption Hover} 
        {Caption Hover} 
        {/block:Caption Hover} 

</div> 

     {/block:Photo} 

내가 t를 얻을 관리했습니다 그는 사라질 이미지지만, 내 인생에 대한 페이드 인 텍스트를 얻을 수 없습니다. 누군가가 내가 뭘 잘못 말해 줄 수 있습니까?

Answer 1

저는 전문가는 아니지만 문제는 그 위치가 애니메이션 가능한 속성이 아니라고 생각합니다. 당신은 단지 전환과 같이, 가시성 속성에 적용 할 것을 지정해야합니다

transition:visibility 0.75s; 
-moz-transition-property:visibility; 
-webkit-transition-property:visibility; 
-o-transition-property:visibility; 
-moz-transition-duration:0.75s; 
-webkit-transition-duration:0.75s; 
-o-transition-duration:0.75s; 

(또는 당신은, 너무, 브라우저 별 문에 대해 하나 개의 문장에 모두 통합 할 수 있어야하지만, 내가 그들에게 그런 식으로 남아 있도록 특별히, 사람들에게 전이 시간을 사용)

출처 :. Using CSS Transitions, CSS Animated Properties