Question

I’m having a bit of a problem with one particular CSS3 transition (here)

The video ‘slider’ type thing…when you hover over one of the titles the video embed pops up, great! But it doesn’t slide back down! And I have no idea why! It’s built off of this article (altered for video and a wordpress loop).

My HTML is as follows:

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

And the CSS:

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

I’ve tried many different variations of where to put the transition, and how to name the .home_video div (with or without the a tag) and tried putting the transition on both the hover and non-hover state but can’t seem to get it to transition back, even though all of my other CSS3 effects do.

Any ideas guys?
Thanks

Answer 1

change this :

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

to this:

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

Hope it will help…