CSS Transitions - не работает после изменения размера элемента

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