html - Image Displaying Navigation Bar -

i want navigation bar display part of image, display image if on page (say click home, it'll uncover part of picture).. in other words, want image hidden in bar shows when button clicked. (each button have own piece of picture.)

is possible using css , html?

code css navigation bar:

@nav_bar_background: #000000 center center repeat-x scroll; @nav_bar_border: 0px solid @container_outer_border_color; @nav_bar_border_radius: 0 0 0 0; @nav_bar_button_color: #f2f3f5; @nav_bar_button_font: normal normal 15px tahoma, geneva, sans-serif; @nav_bar_button_decoration: none; @nav_bar_button_shadow: none; @nav_bar_button_background: #050505   fixed; @nav_bar_button_hover_color: @nav_bar_button_color; @nav_bar_button_hover_font: @nav_bar_button_font; @nav_bar_button_hover_decoration: @nav_bar_button_decoration; @nav_bar_button_hover_shadow: @nav_bar_button_shadow; @nav_bar_button_hover_background: @nav_bar_button_background; @nav_bar_button_current_color: #ffffff; @nav_bar_button_current_font: @nav_bar_button_font; @nav_bar_button_current_decoration: @nav_bar_button_decoration; @nav_bar_button_current_shadow: @nav_bar_button_shadow; @nav_bar_button_current_background: #790a79 center repeat-x scroll; @nav_bar_bubble_text_color: #ffffff; @nav_bar_bubble_font: .8em "trebuchet ms", verdana, arial; @nav_bar_bubble_background: #790a79; @nav_bar_bubble_border_radius: 0; #navigation-menu { padding: 0 0px; background: @nav_bar_background;  border: @nav_bar_border; .rounded-corners(@nav_bar_border_radius); } #navigation-menu { position: relative; } #navigation-menu > ul, #navigation-menu > ul li { float: left; } #navigation-menu > ul li { display: inline-block; padding: 0 .75em; color: @nav_bar_button_color; font: @nav_bar_button_font; text-decoration: @nav_bar_button_decoration; text-shadow: @nav_bar_button_shadow; background: @nav_bar_button_background; line-height: 80px !important; width: auto } #navigation-menu > ul li:hover { color: @nav_bar_button_hover_color !important; font: @nav_bar_button_hover_font; text-decoration: @nav_bar_button_hover_decoration !important; text-shadow: @nav_bar_button_hover_shadow; background: @nav_bar_button_hover_background; line-height: 80px !important; width:auto } #navigation-menu > ul li a.state-active { color: @nav_bar_button_current_color !important; font: @nav_bar_button_current_font; text-decoration: @nav_bar_button_current_decoration !important; text-shadow: @nav_bar_button_current_shadow; background: @nav_bar_button_current_background; line-height: 80px !important; width: auto} #navigation-menu div.tip-holder { position: absolute; top: 5px; right: -5px; display: inline-block; } #navigation-menu div.tip-holder div.tip-number { padding: 3px 7px 2px 7px; background-color: @nav_bar_bubble_background; .rounded-corners(@nav_bar_bubble_border_radius); font: @nav_bar_bubble_font; line-height: .8em; text-shadow: none; .box-shadow(2px, 2px, 2px, @shadow_color); height: .8em; color: @nav_bar_bubble_text_color; } #navigation-menu div.tip-holder span.tip { border-top: 4px solid @nav_bar_bubble_background; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; left: 6px; } 

simply put background image ul element.
put solid background on li element. make animate transparency on hover or on active state.

*{margin:0;padding:0;}    nav ul{    list-style:none;    background: url(http://lorempixel.com/output/food-q-c-640-480-9.jpg) 50% / cover;    overflow:auto;    display:table;    width:100%;  }  nav ul li{    display:table-cell;  }  nav ul li {    display:block;    text-align:center;    padding:2em 0;    background: rgba(255,255,255, 0.9);    transition: .3s;  }  nav ul li a:hover,  nav ul li a.active{    background: rgba(255,255,255, 0.1);    color: #fff;  }

  <nav>    <ul>      <li><a href="#" class="active">home</a></li>      <li><a href="#">sanwdiches</a></li>      <li><a href="#">grocery</a></li>      <li><a href="#">shop</a></li>      <li><a href="#">sweets</a></li>      <li><a href="#">contact</a></li>    </ul>    </nav>