This is what I have so far:

```
<div style="position: relative;"> <a href="#games">
    <div class="sidenavOff">
    <img src = "images/card_normal.png" />
    <img src = "images/category_icons/icon_games.png" style = "position: absolute; top: 10px; left: 40px;" />
    <img src = "images/category_titles/title_games.png" style = "position: absolute; top: 160px; left: 40px;" />
    </div>
    <div class = "sidenavOver">
    <img src = "images/hover/card_hover.png" />
    <img src = "images/category_titles/title_games.png" style = "position: absolute; top: 10px; left: 40px;" />
    <img src = "images/hover/card_hover_separator.png" style = "position: absolute; top: 40px; left: 40px;" />
    Show a bunch of text here
    <img src = "images/button_start_normal.png" style = "position: absolute; top: 200px; left: 40px;" />
    </div>
    </a>
</div>

```

So card.png is a notecard that has multiple transparent images overlayed on top of it. When the mouse is away from the card, it has icon\_games.png and title\_games.png showing on the card. I want it so that when the mouse hovers over card.png, icon\_games.png, or title\_games.png (in other words, whenever the mouse pointer is in the card), the card displays the elements title\_games.png, card\_hover\_separator.png, a text description, and button\_start\_normal.png, in that order vertically (and the positioning of this should be editable as it will likely be different than the images displayed when not hovering).

This is my jquery code (I've never used it before so I'm pretty sure this is off. I don't quite understand it):

```
$(document).ready(function () {
    $(“div.sidenavOff”).mouseover(function () {
        $(this).removeClass().addClass(“sidenavOver”);
    }).mouseout(function () {
        $(this).removeClass().addClass(“sidenavOff”);
    });
});

```

In a more understandable format, without hover:

<http://img834.imageshack.us/img834/7026/screenshot20130606at122.png>

With hover:

<http://imageshack.us/photo/my-images/855/screenshot20130606at122.png/>