Hoovering on an image

This is because you did not even try to implement it. You added 3 independent mechanisms and did not use any of them:

1. You included jQuery but never ever used a single function from this library.
2. You added really working CSS with the style defined for the element <div>, but never ever added any of the this element to you HTML. Even if you applied this mechanism for <img> element, it would not work, because you would have too image, one in the background (changing) and another in foreground… making background hidden behind, so whole thing would not work.
3. You added events to the element <img> to your HTML but never implemented the events properly; note that doing it is pointless if you are using jQuery which does it all without touching HTML in few lines of code.

As the CSS approach is more than enough, I'll show just this solution. As you probably would not want to apply this style to all divs, I added a class to just one instance of this element, called it "box":

CSS:

div.box {
    width: 100px; height: 100px;
    background: url('http://dummyimage.com/100x100/000/fff');
}
div.box:hover {
    width: 100px; height: 100px;
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

HTML:

<div class="box" />

Another approach would be using jQuery: http://api.jquery.com/hover[^].

You need to use just one method not two or three at a time, as they could interfere with each other.

—SA