Here is the current progress:
<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;" />
Display a lot of text here
<img src = "images/button_start_normal.png" style = "position: absolute; top: 200px; left: 40px;" />
</div>
</a>
</div>
The image card.png is essentially a notecard with transparent overlay images. Initially, icon_games.png and title_games.png are displayed on the card when the mouse pointer is away from it. The goal is to show title_games.png, card_hover_separator.png, a text description, and button_start_normal.png in a vertical order whenever the mouse hovers over card.png, icon_games.png, or title_games.png (all within the card area), allowing customization for positioning different from the default display.
This code snippet showcases my attempt at jQuery (inexperienced with it, so likely errors):
$(document).ready(function () {
$(“div.sidenavOff”).mouseover(function () {
$(this).removeClass().addClass(“sidenavOver”);
}).mouseout(function () {
$(this).removeClass().addClass(“sidenavOff”);
});
});
Preview without hover effect:
With hover effect: