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..
- <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..
- 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..
- $(function() {
$('nav li:has(ul)').hover(function() {
$('header img').toggleClass('submask');
});
});