전환 효과 CSS의 상단과 하단이 작동하지 않습니다.

Question

글쎄, 여기가 내 첫 번째 주제입니다. 여기 있습니다!

나는 이미지 위에 마우스를 올려 놓고 그 아래에있는 캡션을 완성 할 수있는 멋진 간단한 코드를 작성했습니다. 더 구체적으로,이 코드에는 이미지 위에 하나와 이미지 아래에 두 가지 유형의 캡션이 있습니다. 캡션은 마우스를 가져갈 때 찾을 수 있습니다.

호버 (hover)는 꽤 잘 작동하지만, 간단한 선형 효과 만 추가하면됩니다. 그래서 "a"태그에 가장 기본적인 전환을 추가하지만 전혀 작동하지 않습니다! 나는 코드가 상단을 인식하지 못합니다 추측 다음 .featured - 배너 클래스 0 픽셀과 아래 다음 .featured - 배너 0 픽셀가 :를 가져.

누구에게도 해결책이 있습니까? 나를 도와 주신 분들께 감사드립니다!

아, 캡션 수업의 텍스트는 포르투갈어로 작성되었지만 재미있는 것은 아니며 칸쿤 광고입니다. 여기

<div class="featured-banner"> 
<a href="#"> 
    <div class="caption"> 
     <p>Mega Oferta • Cancún • Carnaval 2014</p> 
    </div> 
    <img src="http://www.advtour.com.br/sample-cancun.jpg" /> 
    <div class="under-caption">A partir de US$ 2.148 Ou entrada + 11x de R$ 358</div> 
</a> 

그리고 CSS된다 :

.featured-banner { 
    width:930px; 
    height:350px; 
    background:#000; 
    font-family:sans-serif; 
    font-size:23px; 
    margin:14px 0px; 
    overflow:hidden; 
    position:relative; 
} 
.featured-banner a { 
    text-decoration:none; 
    position:absolute; 
    top:0; 
    -webkit-transition:all 1s ease; 
     -moz-transition:all 1s ease; 
     -ms-transition:all 1s ease; 
     -o-transition:all 1s ease; 
      transition:all 1s ease; 
} 
.featured-banner a:hover { 
    top:inherit; 
    bottom:0; 
} 

.caption { 
    width:100%; 
    height:350px; 
    color:#FFF; 
    text-transform:uppercase; 
    position:absolute; 
    top:0px; 
    z-index:98; 
} 

.caption p { 
    width:97%; 
    background:rgba(0,0,0, .4); 
    color:#FFF; 
    text-align:justify; 
    text-transform:uppercase; 
    background:rgba(0,0,0, .4); 
    padding:11px 14px; 
    position:absolute; 
    bottom:0px; 
    z-index:98; 
} 

.under-caption { 
    width:97%; 
    background:rgba(0,0,0, .4); 
    color:#FFF; 
    font-size:20px; 
    text-align:justify; 
    background:rgba(0,0,0, .4); 
    padding:11px 14px; 
    z-index:98; 
} 

Here is a demo

Answer 1

당신이 전환하려는 경우 = 여기

P

내가 사용하고있어 HTML입니다 그런 다음 동일한 스타일로 전환해야합니다. 위에서 아래로 가면 스타일이 변경되기 때문에 전환이 발생하지 않습니다. top: 0;에서 top: 100%;으로 변경 한 경우 전환이 표시됩니다.

.featured-banner a { 
    text-decoration:none; 
    position:absolute; 
    top:0; 
    -webkit-transition:all 1s ease; 
     -moz-transition:all 1s ease; 
     -ms-transition:all 1s ease; 
     -o-transition:all 1s ease; 
      transition:all 1s ease; 
} 

.featured-banner a:hover { 
    top:inherit; 
    top: -55px; 
} 

마지막으로, 바이올린 : Demo

Answer 2

당신은 같은 속성을 전환 할 수 여기에

내가 변경 한 CSS입니다. 위쪽과 아래쪽이 같지 않습니다. 나는 그것이 작동 할 수있는 방법을 보여주는 바이올린을 만들었습니다.

.under-caption { 
    position: absolute; 
    width:97%; 
    background:rgba(0,0,0, .4); 
    color:#FFF; 
    font-size:20px; 
    text-align:justify; 
    background:rgba(0,0,0, .4); 
    padding:11px 14px; 
    z-index:98; 
    bottom: -3em; 
    -webkit-transition:bottom 1s ease; 
     -moz-transition:bottom 1s ease; 
     -ms-transition:bottom 1s ease; 
     -o-transition:bottom 1s ease; 
      transition:bottom 1s ease; 
} 

.featured-banner:hover .under-caption{ 
    bottom: 1em; 
} 

http://jsfiddle.net/u3E5P/1/