jquery - Adding animation to only one instance of a class -

i'm working in wordpress , have written shortcode function in functions.php file:

// shortcode function call action boxes function actionbox( $atts , $content = null ) {  // attributes extract( shortcode_atts(     array(         'image' => 'url',         'title' => 'title',         'url' => 'link',     ), $atts ) );  // code return '<a class="ctalink" href="' . $url . '"> <div class="ctabox" style="background-image: url(' . $image . '); width: 350px;"> <div class="ctainner"> <div class="titlebox"><h1 class="ctatitle">' . $title . '</h1></div> <h4 class="ctabutton">' . $content . '</h4> </div> </div></a>'; } add_shortcode( 'cta', 'actionbox' ); 

then added jquery add animation call-to-action boxes created shortcode.

problem while working, when hover on 1 boxes, animation applies boxes.

here code: http://jsfiddle.net/sahiba25/kgryv/4/

any ideas how have animation going on 1 box i'm hovering on?

i've tried addclass, adds "active" class instances of boxes.

thanks!

in event handler, this target of event. in case, this:

$('.ctainner', this) 

which selects elements class .ctainner descendants of event target.

another option this:

$(this).find('.ctainner') 

which same thing.