CSS-переходы - не работают после изменения размера элемента - PullRequest
Новая
       4

CSS-переходы - не работают после изменения размера элемента

0 голосов
/ 31 декабря 2011

Фон

Я настраиваю тему Tumblr (Источник: hasaportfolio ) и пытаюсь изменить размер одного конкретного элемента.

Этот элемент, на :hover, предназначен для перехода непрозрачности - "fade in". Однако происходит то, что, как только я изменяю размеры в пикселях, переходы отказываются работать, а вновь появляющийся контент вообще не отображается.

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; }

Я только что пропустил что-то глупое, или в этом коде есть проблема, которая мешает мне что-то делать?

Пример страницы

Вот пример того, что я взял о здесь .

1 Ответ

2 голосов
/ 31 декабря 2011

В данный момент я думаю о том, что вам нужно изменить его на: 

.box-featured:hover
...