Image Background Highlighting or maybe Z-index? - html

Question

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 hovers 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!

Answer 1

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;
}

Answer 2

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

Answer 3

wrap your navwrap-div in another div of the same dimension with the first image as a background
set the background of your navwrap div to transparent
allocate z-index values: 0 for the new wrapper, 1 for original wrapper, 2 for the nav-element
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

Answer 4

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');
});