在CSS中的頂部與底部的過渡效果不起作用

我剛剛做了一個很好的簡單：懸停代碼，您可以將鼠標懸停在圖像上，其下方的標題顯示爲完整。更具體地說，在這段代碼中，我有兩種類型的標題，一個在圖像上方，另一個在圖像下方，可以在鼠標懸停時找到。

：懸停工作相當好，但我需要添加一個簡單的效果，只是一個小小的線性過渡。所以我在「a」標籤中添加了最基本的轉換，但它根本不起作用！我猜碼不能識別頂：0像素在.featured橫幅一個類和底部：0像素在.featured橫幅答：懸停。

有沒有人有解決方案嗎？我很感謝你們幫助我！

哦，爲了以防萬一，字幕類中的文字用葡萄牙語寫成，但不是很有趣，只是坎昆的廣告！ = P

這裏是我使用的HTML：

<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

來源

2014-02-12 Caio Ferrari

如果你要轉型效果，那麼你需要轉換相同的風格。從上到下不會導致過渡，因爲它正在改變樣式。如果你做了top: 0;到top: 100%;那麼你會看到一個轉換。

這是我改變了CSS：

.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

來源

2014-02-12 15:43:49

只能轉換相同的屬性。頂部和底部不一樣。我制定了一個小提琴，它顯示了它如何工作。

.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/

來源

2014-02-12 15:47:11 Haroldchen

在CSS中的頂部與底部的過渡效果不起作用

回答

相關問題