Jquery for hover effect?

Question

I found this code to get a hover effect over an image. I works fine but I need to create other animations and I'm just wondering if the js code could be shorter using jquery and get the same (or similar) effect.

It has to be responsive.

I also need a fallback for IE9 and IE10.

Fiddle: http://jsfiddle.net/J28Yp/3/

html

<div id="container">
<div class="inner">
    <div class="desc">Milo went to the wood. He took a fun ride and never came back</div>
    <div class="title">Faithful<strong>Milo</strong></div>
    <!--img class="photo" src="http://tympanus.net/Development/HoverEffectIdeas/img/11.jpg" /-->
    <div class="photo"></div>
</div>

css

#container {
position: relative;
display: inline-block;
overflow: hidden;
margin: -0.135em;
width: 450px;
height: 350px;
text-align: center;
cursor: pointer;
background: #2e5d5a;
}

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

}

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

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

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

js

//window.onload = function() {

var photo = $("#container .photo");
var desc = $("#container .desc");
var inner = $("#container .inner");

var myTween = new TweenLite(
    photo,
    0.3,
    {scale:1, opacity:0.5, paused: true}
)

var myTween2 = new TweenLite(
    desc,
    0.3,
    {x:10, y:-20, opacity:1, paused: true}
)

inner.hover(
    function () {
        myTween.play();
        myTween2.play();
    }, 
    function () {
        myTween.reverse();
        myTween2.reverse();
    }
);
    inner.mouseOut
}

Answer 1

Here is the shortest version of your code (using no JS!), using only CSS:

#container:hover .photo {
    transition: .3s all linear;
    transform: matrix(0.95, 0, 0, 0.95, 0, 0);
    opacity: 0.5;
}

#container:hover .desc {
    transition: .3s all linear;
    margin: -20px 0 0 10px;
    opacity: 1;
}

Note: moved the transition rules to the non-hover states to get the mouse out animations working.

See it here: http://jsfiddle.net/shomz/J28Yp/18/

---

More cross-browser friendly: http://jsfiddle.net/shomz/J28Yp/19/