For some reason the Console says that the "jQuery is not Defined". And it is not working... And here is the Code:

CSS:

body {
    background-color: rgb(176,176,176) !important;
}

.opala {
    position: fixed;
    height:100vh;
    width:100%;
    top:0px;
}

.image-holder{
    position: relative;      
    left:0px;
    height:100vh;
    margin-top:21%;
    width:100%;
}

.head-image{
    position: absolute;  
    width:46%;
    margin-left:27%;
    bottom:0px;
    z-index: 0;
    height:;
}

.front{
    z-index: 1;
}

HTML

<div class="image-holder one">          
    <img class="head-image up" src=".jpg"/>
    <img class="head-image up-left" src=".jpg"/>
    <img class="head-image left" src=".jpg"/>
    <img class="head-image down-left" src=".jpg"/>
    <img class="head-image down" src=".jpg"/>
    <img class="head-image down-right" src=".jpg"/>
    <img class="head-image right" src=".jpg"/>
    <img class="head-image up-right" src=".jpg"/>
    <img class="head-image front" src=".jpg"/>
    </div>

Script:

        var mouseX;
        var mouseY;
        var imageOne;
        var imageTwo;
        var imageThree;
        var imageFour;
        var imageFive;

        /* Calling the initialization function */
        jQuery(init);

        /* The images need to re-initialize on load and on resize, or else the areas
         * where each image is displayed will be wrong. */
        jQuery(window).load(init);
        jQuery(window).resize(init);

        /* Setting the mousemove event caller */
        jQuery(window).mousemove(getMousePosition);

        /* This function is called on document ready, on load and on resize
         * and initiallizes all the images */
        function init(){

            /* Instanciate the mouse position variables */
            mouseX = 0;
            mouseY = 0;

            /* Instanciate a HeadImage class for every image */
            imageOne = new HeadImage("one");
            imageTwo = new HeadImage("two");
            imageThree = new HeadImage("three");
            imageFour = new HeadImage("four");
            imageFive = new HeadImage("five");
        }

        /* This function is called on mouse move and gets the mouse position. 
         * It also calls the HeadImage function to display the correct image*/
        function getMousePosition(event){

            /* Setting the mouse position variables */
            mouseX = event.pageX;
            mouseY = event.pageY;

            /*Calling the setImageDirection function of the HeadImage class
             * to display the correct image*/
            imageOne.setImageDirection();
            imageTwo.setImageDirection();
            imageThree.setImageDirection();
            imageFour.setImageDirection();
            imageFive.setImageDirection();
        }



 var className;
 var imageTop;
 var imageLeft;
 var imageBottom;
 var imageRight;

 function HeadImage(className){

/* Setting the global instance of classname to the given parameter*/
this.className = className;

/* Calculating the borders of the image */
this.imageLeft = jQuery("."+this.className+">.head-image").offset().left;
this.imageRight = this.imageLeft + jQuery("."+this.className+">.head-image").width();
this.imageTop = jQuery("."+this.className+">.head-image").offset().top;
this.imageBottom = this.imageTop + jQuery("."+this.className+">.head-image").height();

/* This function determines where the mouse pointer is relative to the image
 * and displays the correct image accordingly. */
this.setImageDirection = function(){
    jQuery("."+this.className+">.head-image").css("z-index","0");
    if(mouseX >= this.imageLeft && mouseX <= this.imageRight && mouseY <= this.imageTop){
        jQuery("."+this.className+">.up").css("z-index","1");
    } else if(mouseX < this.imageLeft && mouseY < this.imageTop){
        jQuery("."+this.className+">.up-left").css("z-index","1");
    } else if(mouseX <= this.imageLeft && mouseY >= this.imageTop && mouseY <= this.imageBottom){
        jQuery("."+this.className+">.left").css("z-index","1");
    } else if(mouseX < this.imageLeft && mouseY > this.imageBottom){
        jQuery("."+this.className+">.down-left").css("z-index","1");
    } else if(mouseX >= this.imageLeft && mouseX <= this.imageRight && mouseY >= this.imageBottom){
        jQuery("."+this.className+">.down").css("z-index","1");
    } else if(mouseX > this.imageRight && mouseY > this.imageBottom){
        jQuery("."+this.className+">.down-right").css("z-index","1");
    } else if(mouseX >= this.imageRight && mouseY >= this.imageTop && mouseY <= this.imageBottom){
        jQuery("."+this.className+">.right").css("z-index","1");
    } else if(mouseX > this.imageRight && mouseY < this.imageTop){
        jQuery("."+this.className+">.up-right").css("z-index","1");
    } else{
        jQuery("."+this.className+">.front").css("z-index","1");
        jQuery(".text-holder").css("display","none");
        jQuery("."+this.className+".text-holder").css("display","block");
    }
};

}