Image hover jquery effect

Question

Hy there. What I'm trying is this:

$(document).ready(function() {
$('.wrapper').hover(function() {
$('.image', this).animate({width:"110%",opacity:"0.5"}{duration:100,queue:false});
$('h4',this).animate({ margin-left: "10px"} {duration:300,queue:false});
$('p',this).animate({ margin-left: "40px", display: "block"} {duration:200,queue:false});
}); 
});

http://jsfiddle.net/ygqouhk1/

But the problem is it doesn't work and when it works sometimes it applies the animations to all divs with the same class and it doesn't go back to normal state after mouse leave. I'm not so good with jquery but I would like to make something like this css effect just in jquery. It must not be exactly like this one, just similar I will try to tweak the positions and colors later on:

http://jsfiddle.net/shomz/J28Yp/19/

#container .photo {
    transition: .3s all linear;
    height: 400px;
    width: 500px;
    left:-5%;
    top:-20px;
    position: relative;
    background:url('http://tympanus.net/Development/HoverEffectIdeas/img/11.jpg') no-repeat center center;

}

#container:hover .photo {
    transform: matrix(0.95, 0, 0, 0.95, 0, 0);
    opacity: 0.5;
}

#container:hover .desc {    
    margin: -20px 0 0 10px;
    opacity: 1;
}

.desc {
    transition: .3s all linear;
    font-size: 14px;
    top: 60px;
    width: 210px;
    text-align: right;
    left: 20px;
    padding-right: 10px;
    border-right: 1px solid;
    opacity:0;
    margin: 0;
}

.title {
    font-size:30px;
    bottom: 20px;
    right: 40px;
}

.desc,
.title {
    position: absolute;  
    z-index:2;
    color: #ffffff;
    font-family: Arial;
    text-transform: uppercase;
}

Any ideas?

Answer 1

$('.image').hover(
            function() {
                $(".rollOver", this).fadeIn();
            },
            function() {
                $(".rollOver", this).fadeOut();
            }
        );

You need this code. Check full demo here " http://jsfiddle.net/SaurabhGhewari/oLrpL3wy/3/ "

Answer 2

$('.wrapper').hover(function(e) {
    $(e.target).animate({width:"110%",opacity:"0.5"}{duration:100,queue:false});
});

$(e.target) represents clicked element so animation doesn't applies to all elements with same class.