Image Background Highlighting or maybe Z-index?

I've come so far (but you wouldn't know it). Struggling through my art website.

This page http://rollinleonard.com/elements/ This page has a little overlay div that hov开发者_如何学运维ers over these img. The first img is in the background of a div. I want that img to also have this blue highlighter effect.

How do I get it so that its a normal img and then on another layer over that img there is my nav (text with white background)?

Thanks!

---

I thick the easyest way to do this is to mak your first div like other image a > img and put your nav in absolute position.

HTML :

<nav>...</nav>
<a href="#">
   <img src="home.gif" alt="Home BG" />
</a>

CSS :

nav {
   position: absolute;
}

---

@ rollin , there no need to use js check this http://jsfiddle.net/sandeep/f2662/

---

1. wrap your navwrap-div in another div of the same dimension with the first image as a background
2. set the background of your navwrap div to transparent
3. allocate z-index values: 0 for the new wrapper, 1 for original wrapper, 2 for the nav-element
4. adjust the selector of your mouseenter-handler to 'img, #navbg'. you may also have to guard the dynamic setting of your click handler on the overlay div (pointless if vent target is the new div).

your code looks like this:

<div id="navbg" style="width: 300px; height: 300px; z-index: 0; background-image: url('home.gif');"> 
<div style="z-index: 1; background-color: transparent;" id="navwrap">
<nav style="z-index: 2;" >
...
</nav>
</div>
</div>

(use of inline definitions for styles for demonstration purposes only)

best regards, carsten

---

add this in your js file inside the $(window).load() event

$('#navwrap').bind('mouseenter', function () {
    var $this = $(this);
    if ($this.not('.over')) {
        $this.addClass('over');
        $overlay.css({
            width  : $this.css('width'),
            height : $this.css('height'), 
            top    : $this.offset().top + 'px',
            left   : $this.offset().left + 'px'
        }).show();
    }
 }).bind('mouseout', function () {
     $(this).removeClass('over');
 });