Jquery isotope filtering fade unmatched items instead of hiding. 
in case of filtering the unmatched items get the property of display none.
I want to show the match items should automatically scroll up and other should scroll down
something like this 
<http://base22.com/wps/portal/home/about-us/our-team>

```js
var $container = $('.portfolioContainer');
        $container.isotope({
            filter: '*',
            hiddenStyle: {opacity: 0.7},
            visibleStyle: {opacity: 1},
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
        $('.innermenu .list-inline li a').click(function() {
            $('.innermenu .list-inline li .current').removeClass('current');
            $(this).addClass('current');
            var selector = $(this).attr('post-category');
            $container.isotope({
                filter: selector,
                hiddenStyle: {opacity: 0.7},
                visibleStyle: {opacity: 1},
                itemPositionDataEnabled: true,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });
            return false;
        });
```

```css
.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    -ms-transition-property:     -ms-transform, opacity;
    -o-transition-property:      -o-transform, opacity;
    transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

.isotope:after {
  content: '';
  display: block;
  clear: both;
}
```

```html
<?php
get_header();
?>
<?php // echo get_the_ID(); ?> 
<div class="row submenu">       
    <div class="col-md-12 col-sm-12 col-xs-12 submenu-padding">
        <nav class="innermenu">
            <ul class="list-inline">
                <li><p class="tags-menu submenu-padding">tags</p> </li>
                <li><a href="#" post-category="*" class="current">All</a></li>
                <li><a href="#" post-category=".mobile">Mobile</a></li>
                <li><a href="#" post-category=".websites">websites</a></li>
                <li><a href="#" post-category=".social-media">Social Media</a></li>
                <li><a href="#" post-category=".digital-activation">Digital Activation</a></li>
                <li><a href="#" post-category=".films">Films</a></li>
                <li><a href="#" post-category=".search">Search</a></li>      
                <li><a href="#" post-category=".media">Media</a></li>
            </ul>

        </nav> 
    </div>
</div>
<?php
if (have_posts()) :
    ?>
    <div class="portfolioContainer">
        <?php while (have_posts()): the_post() ?> 
            <div class="col-md-4 col-sm-4 col-xs-12 portfolio thumbnail-margin <?php
            $categories = get_the_category();
            $separator = ' ';
            $output = '';
            if ($categories) {
                foreach ($categories as $category) {
                    $output .= $category->slug . $separator;
                } echo trim($output, $separator);
            }
            ?>">
                <div class="thumbnail">
                    <a href="<?php echo get_permalink(); ?>">  
                        <?php
                        if (has_post_thumbnail()) {
                            the_post_thumbnail();
                        }
                        ?>
                        <div class="caption">
                            <h4 class="portfolio-heading"><?php echo the_title(); ?></h4>
                            <div class="portfolio-caption"> <?php the_excerpt(); ?></div>
                        </div>
                    </a>
                </div>
            </div>
        <?php endwhile; ?>
    </div>
    <?php
endif;
?>

<?php
get_footer();
```

ed elements on the top row and all other should shift down according.