html - Show background image on hover -

i'm trying show background image text inside when im hoovering navigation link, reason image wont show up.

here of title css

   .navigation h1 {     position: absolute;     right: 22px;     top: -7px;     display: none;     padding: 4px 20px 4px 7px;     color: #fff;     white-space: nowrap;     background: transparent url('http://i.imgur.com/dbncnpk.png') 100% 50% no-repeat;     } 

html

<div class="navigation">     <ul>         <li>             <h1>one</h1>             <a href="#hem" class="active">one</a>                      </li>         <li>    <h1>two</h1>             <a href="#two">two</a></li>         <li>    <h1>three</h1>             <a href="#three">three</a></li>     </ul> </div> 

and fiddle

jsfiddle

http://jsfiddle.net/vbsdp/1/

check out fiddle.

you didn't have hover class show h1. added:

.navigation li:hover h1 {     display:block; } 

i have updated again:

http://jsfiddle.net/vbsdp/3/

this time added:

top: -35px; 

for h1 , put

positon: relative;  

for li