CSS 过渡 - 更改元素大小后不起作用

Question

Background

我正在自定义一个 tumblr 主题(来源：hasaportfolio(，我正在尝试更改一个特定元素的大小。

这个元素，在:hover，意味着过渡不透明度 - "淡入"。然而，正在发生的事情是，一旦我更改像素大小，过渡就会拒绝工作，并且新出现的内容根本不会出现。

网页代码

应用此内容的 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; }

我只是错过了一些愚蠢的东西，还是此代码中存在阻止我尝试执行的操作的问题？

示例页面

这里有一个例子来说明我正在做的事情。

Answer 1

此时我的想法是您需要将其更改为：

.box-featured:hover