Problema imagenes con js en inicio

[bujeiro]

He usado un recurso gratuito de CSS Tricks (cuando sepa como hacerlo funcionar al 100% lo comparto) para crear unas imagenes a modo boton con una transicion en vertical (ejemplo). Sale una imagen y al poner el raton encima se levanta como una persiana y aparece la imagen de fondo.

 

Despues de pelearme con el codigo a ver donde iba cada cosa, añadi el css en 'global.css' y el codigo js y html directamente con el editor html que trae prestashop en la pagina CMS.

 

<script type="text/javascript">// <![CDATA[
$(function() {
// Set CSS for old versions of Firefox (Required to use the backgroundPosition js)
$('#shutter1').css({backgroundPosition: '0px 0px'});
$('#shutter2').css({backgroundPosition: '0px 0px'});
$('#shutter3').css({backgroundPosition: '0px 0px'});
$('#shutter4').css({backgroundPosition: '0px 0px'});
// Animate the Shutter
$("#garagedoor a").hover(function(){
   $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500);
}, function() {
   $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500);
});

});
// ]]></script>
<ul id="garagedoor">
<li id="shutter1"><a href="#1">Link 1</a></li>
<li id="shutter2"><a href="#2">Link 2</a></li>
<li id="shutter3"><a href="#3">Link 3</a></li>
<li id="shutter4"><a href="#4">Link 4</a></li>
</ul>

 

En las páginas CMS el codigo funciona correctamente (Aqui funciona) pero cuando he intentado pasarlo a la portada no hace la transicion (Aqui NO funciona).

 

Se que el codigo lo lee correctamente por que el boton de facebook que tengo debajo funciona sin problemas, pero la transicion no.

Alguien sabe que puede interferir?