I'm struggling with a mouseOver effect. You can see what I'm working with Here: <http://jsfiddle.net/4t4nM/1/>

Here's the HTML structure I'm using 

```
<div class="row">
   <div class="large-3 small-6 columns">
      <div class="panel">News  + Video </div>
   </div>
</div>

```

The functionality I'm trying to build is that when you mouse over the "large-3 small-6 columns" the "panel" div in that specific cell (Not the other cells with the same class) goes through this animation:

```
$( function(){
  $('.large-3').mouseenter( function(){
    $('.panel').stop().animate({opacity:1});
   }).mouseleave( function(){
    $('.panel').stop().animate({opacity:0});
   })
});

```

I am struggling to make the mouseover ONLY occur on the cell which the mouse is on & I am struggling with how to make the JS work on a div with three class selectors.

Any help is much appreciated

The final application of this script will be used in this context: 
<http://www.zoommarketing.com/jordanswonderfullandofwhat/index.html>