2012-09-12 3 views
1

У меня немного проблемы с одним конкретным переходом CSS3 (here)не CSS3 переход из

Тип видео «слайдер» вещь ... при наведении курсора на один из заголовков на видео встраивать Pops up, отлично! Но он не скользит назад! И я понятия не имею, почему! Он построен из статьи this (изменен для видео и цикла wordpress).

Мой HTML выглядит следующим образом:

<div id="slider"> 
<div class="empty"> 
<!--IMG link here for background image--> 
</div> 

<?php $currentID = get_the_ID(); 
$args = array( 
    'post_type' => 'portfolio', 
    'cat' => 5, 
    'posts_per_page' => 4, 
    'post__not_in' => array($currentID) 
); 
$loop = new WP_Query($args); 
while ($loop->have_posts()) : $loop->the_post(); ?> 

<a href="<?php the_permalink(); ?>"> 
<div class="related"> 
    <div class="each"> 
    <h2><?php the_title(); ?></h2><br> 
    <p><?php getCustomField('vid-intro'); ?></p> 
</div> 
</div> 

<div class="home_video"> 
<div class="video"> 
    <?php getCustomField('embed_url'); ?> 
</div> 
</div> 
</a> 

<?php endwhile; ?>      
</div> 

И КСС:

#slider { max-width: 942px; height: 360px; margin: 2em auto 1em auto; 
     box-shadow: 0px 0px 1em #999; position: relative; overflow: hidden; } 

a .home_video { 
width: 642px; 
height: 360px; 
position: absolute; 
top: 360px; 
z-index: -1; 
-webkit-transition: top .5s ease; 
-moz-transition: top .5s ease; 
-o-transition: top .5s ease; 
-ms-transition: top .5s ease; 
transition: top .5s ease; 
} 

a:hover .home_video { 
top: 0px; 
z-index: 0; 
} 

Я пробовал много различных вариантов, где поставить переход, и как назвать .home_video DIV (с тегом или без него) и попытался включить переход как в режим наведения, так и в не зависание, но, похоже, не может вернуться к нему, даже несмотря на то, что все мои другие эффекты CSS3.

Любые идеи парней? Благодаря

ответ

1

изменить это:

-webkit-transition: top .5s ease; 
-moz-transition: top .5s ease; 
-o-transition: top .5s ease; 
-ms-transition: top .5s ease; 
transition: top .5s ease; 

к этому:

-webkit-transition: all .5s ease; 
-moz-transition: all .5s ease; 
-o-transition: all .5s ease; 
-ms-transition: all .5s ease; 
transition: all .5s ease; 

Надеется, что это поможет ...

+0

Genius! Спасибо! :) – lukeseager