show part of image on li:hover

show part of image on li:hover

Hi all,

I've got a header with a <h1> and a very large image inside. Below the header, I placed a nav with some links and sublinks. Through css I set the sublinks to display:none; when hovering over a <li>, the sublinks appear.
So far, so good..

The huge image inside the header is clipped to show only a part of the whole image.
When hovering over a <li>, I want to show a bit more of the image eg. fill the sub-ul with more of the image.

Now I've got this working, only I'm seeing more of the image that I suspected.
Perhaps a screenshot would clarify my problem..





The part of the image inside the submenu I want to keep; the rest of the image that's outside the header I want to delete.

See below for html, css and script.

html..
  1. <div id="wrapper">
            <header>
                <img width="3264" height="1836" alt="" src="img/bike.jpg"/>
                <h1 class="logo">Jeff Klunder - Labs</h1>
            </header>
           
            <nav>
                <ul>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a>
                        <ul>
                            <li><a href="">subLink</a></li>
                            <li><a href="">subLink</a></li>
                            <li><a href="">subLink</a></li>
                        </ul>
                    </li>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a>
                        <ul>
                            <li><a href="">subLink</a></li>
                            <li><a href="">subLink</a></li>
                            <li><a href="">subLink</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>




























css..
  1. header {
        width: 100%;
        position: relative;
        padding-top: 10px;
    }

    header img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        clip: rect(0 1000px 100px 0);
    }

    .submask {
        clip: rect(0 1000px 300px 0);
    }

    nav {
        position: relative;
        z-index: 2;
        background: #fff;
        opacity: 0.5;
        filter: alpha(opacity=50);
        padding: 10px 22px 9px;
    }

    nav li {
        position: relative;
        display: inline-block;
        margin-right: 20px;
    }

    nav li ul {
        display: none;
        position: absolute;
        background: #fff;
        padding: 20px 10px 10px;
        left: -10px;
    }

    nav li:hover ul {
        display: block;
    }

    nav li ul li {
        display: block;
    }
















































script..
  1. $(function() {
        $('nav li:has(ul)').hover(function() {
            $('header img').toggleClass('submask');
        });
    });