CSS過渡 - 改變元素

Question

背景

我定製tumblr主題（來源：hasaportfolio）的大小後沒有工作，我試圖改變一個特定元素的大小。

此元素在:hover上的意思是轉變不透明度 - 「淡入」。然而，發生的事情是，一旦我改變像素大小，轉換就會拒絕工作，新出現的內容完全不會出現。

HTML代碼

的HTML代碼這個被施加到被如下。我儘可能地評論它。

<div class="post video featured"> <!-- wrapper, no css attached --> 

    <div class="box-featured"> 

     <iframe src="http://player.vimeo.com/video/30284533" width="750" height="430" frameborder="0"></iframe> 

     <div class="box-caption-text-featured"> <!-- this div and content is "hidden" (0% opacity) until :hover --> 

      <h1>Paint</h1> 
      <p>I hate yogurt. It's just stuff with bits in.</p> 
      <p>You know how I sometimes have really brilliant ideas? You've swallowed a planet!</p> 

     </div><!-- box-caption-text-featured --> 

     <a href="#" class="box-caption-featured">#</a> <!-- this a is the "trigger" for the transition. Normally it would link to the post permalink --> 

    </div><!-- box-featured --> 

</div><!-- post --> 

我也有這個代碼的另一個副本，唯一的區別是，它是沒有-featured在每個類定義的結束。這是因爲我可以看到代碼是否以其「原始」大小（它所做的）工作。

CSS代碼

運行這些箱子的原代碼如下：

.box { float:left; width:250px; height:130px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; } 
.box-caption, { width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:transparent; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; } 
.box-caption-text { color:#fff; width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; } 
.box:hover .box-caption { display:inline-block; background-color:transparent; } 
.box:hover .box-caption-text { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; } 

我改變的代碼如下所示。我改變的唯一的東西是width和height像素值。

.box-featured { float:left; width:750px; height:430px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; } 
.box-caption-featured { width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:#f00; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; } 
.box-caption-text-featured { color:#fff; width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; } 
.box:hover .box-caption-featured { display:inline-block; background-color:transparent; } 
.box:hover .box-caption-text-featured { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; } 

我只是錯過了一些愚蠢的東西，還是在這個代碼中有一個問題，阻止我想要做什麼？

實例Page

有什麼我需要大約over here一個例子。

Answer 1

我在想什麼，在這一點上，你需要將其更改爲：

.box-featured:hover