Adding animation to only one instance of a class

Adding animation to only one instance of a class

I'm working in WordPress and have written a shortcode function in my
functions.php file:
// shortcode function for call to 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 I added some jQuery to add animation to the call-to-action boxes
created by my shortcode.
Problem is that while everything is working, when I hover over one my
boxes, the animation applies itself to all the boxes.
Here is all my code: http://jsfiddle.net/sahiba25/kGryV/4/
Any ideas as to how I could have the animation going on just the one box
that I'm actually hovering on?
I've already tried addClass, but it adds the "active" class to all
instances of the boxes.
Thanks!