Не могу анимировать посты

[mariet]

Необходимо анимировать посты сайта http://ekspert-uc.ru/training/gosudarstvennaya-sluzhba/    Нужно чтоб при наведении голубой прямоугольник выдвигался сбоку.

Голубой прямоугольник фон постов вставился в файле loop.php

 

    <?php if(!is_single()){ global $more; $more = 0; } //enable more link ?>
    <?php
    /** Themify Default Variables
    *  @var object */
    global $themify;
    ?>
    <?php themify_post_before(); // hook ?>
    <article itemscope itemtype="http://schema.org/Article" id="post-<?php the_ID(); ?>" <?php post_class("post clearfix " . $themify->get_categories_as_classes(get_the_ID())); ?>>
       <?php themify_post_start(); // hook ?>
       <?php
       //check if there is a video url in the custom field
       if( themify_get('video_url') != '' ){
         global $wp_embed;
      
         themify_before_post_image(); // Hook
      
         echo $wp_embed->run_shortcode('[embed]' . themify_get('video_url') . '[/embed]');
      
         themify_after_post_image(); // Hook
      
       } elseif( $post_image = themify_get_image($themify->auto_featured_image . $themify->image_setting . "w=".$themify->width."&h=".$themify->height . '&image_meta=true') ){
         if($themify->hide_image != 'yes'): ?>
      
           <?php themify_before_post_image(); // Hook ?>
        
           <figure class="post-image <?php echo $themify->image_align; ?>">
             <?php if( 'yes' == $themify->unlink_image): ?>
               <?php echo $post_image; ?>
             <?php else: ?>
               <a href="<?php echo themify_get_featured_image_link(); ?>"><?php echo $post_image; ?><?php themify_zoom_icon(); ?></a>
             <?php endif; ?>
           </figure>
        
           <?php themify_after_post_image(); // Hook ?>
        
         <?php endif; //post image
       } ?>
       <div class="post-content">
         <?php if($themify->hide_date != 'yes'): ?>
           <time datetime="<?php the_time('o-m-d') ?>" class="post-date entry-date updated" itemprop="datePublished"><?php echo get_the_date( apply_filters( 'themify_loop_date', '' ) ) ?></time>
         <?php endif; //post date ?>
      
    <div style="background: url('http://ekspert-uc.ru/wp-content/themes/basic/images/screen_4_budget_bg.jpg') center bottom no-repeat; width: 100%; height: 140px; position: relative;">
      </div>
         <?php if($themify->hide_title != 'yes'): ?>
           <?php themify_before_post_title(); // Hook ?>
           <?php if($themify->unlink_title == 'yes'): ?>
        
             <h1 class="post-title entry-title" itemprop="headline"><?php the_title(); ?></h1>
           <?php else: ?>
             <h1 class="post-title entry-title" itemprop="headline"><a href="<?php echo themify_get_featured_image_link(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
           <?php endif; //unlink post title ?>
           <?php themify_after_post_title(); // Hook ?>
         <?php endif; //post title ?>
         <?php if($themify->hide_meta != 'yes'): ?>
           <p class="post-meta entry-meta">
             <span class="post-author"><?php echo themify_get_author_link() ?></span>
             <span class="post-category"><?php the_category(', ') ?></span>
             <?php the_tags(' <span class="post-tag">', ', ', '</span>'); ?>
             <?php  if( !themify_get('setting-comments_posts') && comments_open() ) : ?>
               <span class="post-comment"><?php comments_popup_link( __( '0 Comments', 'themify' ), __( '1 Comment', 'themify' ), __( '% Comments', 'themify' ) ); ?></span>
             <?php endif; //post comment ?>
           </p>
         <?php endif; //post meta ?>
      
         <div class="entry-content  block_anim" itemprop="articleBody">
         <div сlass="block_anim_wrap" style="background-color:rgba(89,171,192,0.6);">
         <?php if ( 'excerpt' == $themify->display_content && ! is_attachment() ) : ?>
           <?php the_excerpt(); ?>
    <div class="mask1"></div>
           <?php if( themify_check('setting-excerpt_more') ) : ?>
             <p><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute('echo=0'); ?>" class="more-link"><?php echo themify_check('setting-default_more_text')? themify_get('setting-default_more_text') : __('More &rarr;', 'themify') ?></a></p>
             <div class="mask1"></div>
           <?php endif; ?>
         <?php elseif ( 'none' == $themify->display_content && ! is_attachment() ) : ?>
         <?php else: ?>
           <?php the_content(themify_check('setting-default_more_text')? themify_get('setting-default_more_text') : __('More &rarr;', 'themify')); ?>
         <div class="mask1"></div>
         <?php endif; //display content ?>
         </div>
         </div><!-- /.entry-content -->
      
         <?php edit_post_link(__('Edit', 'themify'), '<span class="edit-button">[', ']</span>'); ?>
      
       </div>
       <!-- /.post-content -->
       <?php themify_post_end(); // hook ?>
    </article>
    <?php themify_post_after(); // hook ?>
    <!-- /.post -->

 

Голубой перямоугольник-фон в каждом посте.Без наведения его не видно,а при наведении он выдвигается сбоку, можно с текстом или без текста.обозначен как

<div сlass="block_anim_wrap" style="background-color:rgba(89,171,192,0.6);">

Должен выдвигаться внутри
<div class="entry-content block_anim" itemprop="articleBody">.
В css вставила код не работает

.block_anim{
    position:relative
}
 
.block_anim .block_anim_wrap{
    position:absolute;
    top:0;
    left:0;
    width:0px;
    height: 100%;
    background: rgba(0,0,255,0.3);
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}
 
.block_anim:hover .block_anim_wrap{
    width:100%
}

 

 

Edited September 30, 2016 by mariet

[yardim]

У Вас в вашем цсс файле лишняя скобка фигурная: http://joxi.ru/YmEDaWVSZ8Eb5r .

Это во-первых. 

А во-вторых, если Вы хотите, чтобы везжало нормально, то лучше анимировать не высоту, а margin. Задайте блоку, который хотите анимировать отрицательный левый марджин в -100%. Родителю задайте overflow: hidden, чтобы блок отодвинувшийся был скрыт. Ну а по ховеру марджин в 0.

И уберите абсолюты и релативы. Иначе ваш блок будет всегда высотой в 0. Почему? Потому что, когда вы блоку задаете абсолют, он перестает влиять на другие блоки вокруг, включая своего родителя, и родитель  схлопнется в 0, не зависимо от того, что Вы ему указали позишен релатив, хоть 10 релативов. А потом вы дочернему задаете высоту 100%. Получается, что вы задаете высоту 100% от 0. Это сколько? Правильно, ноль.

Да, и лучше даже вместо марджина использовать свойство трансформ с функцией транслэйт, что позволит анимации быть более производительной. Но тут уже надо будет иметь ввиду, что в старых браузерах работать трансформ не будет. Для старья все-равно придется использовать старый-добрый margin.

Edited September 30, 2016 by yardim

[mariet]

Убрала скобку, абсолюты и релативы, не работает.Замучилась уже.Думала если анимирую добавлю еще значок какой-нибудь пульсирующий.

[mariet]

Там я проверила через Mozilla Firefox он hover совсем не видит.И margin-left добавила.

Edited September 30, 2016 by mariet