CODEWITHSUNDEEP
htmlcss
Dymond
Dymond

Reputation: 2277

Show background image on hover

I'm trying to show an background image with some text inside when im hoovering the navigation link, but for some reason the image wont show up.

Here some of the 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 a Fiddle

JSFiddle

Upvotes: 1

Views: 1569

Answers (4)

Milche Patern
Milche Patern

Reputation: 20442

.navigation h1 {
position: absolute;
right: 22px;
top: -7px;
display: none;  /*  <-- were you expecting some magic ? */
...
}

Your css makeover seems a little messed up. You only 'hover' declaration is :

.navigation a:hover{
border-radius:25px;
background-color:#f68A33;
}

witch will NOT achieve what you want. It just manage the A tag.

So, if you want some action to happen on the tag, you will have to scope it.

h1 { remove the display:none; h1 is block-level by default}
h1.hover {do your background thing here }

Upvotes: 1

Vipul
Vipul

Reputation: 325

you can user hover in css as :

   .navigation h1:hover {
    background: transparent url('http://i.imgur.com/dbnCNPk.png') 100% 50% no-repeat;
    }

and adjust the position.

Upvotes: 1

liamjay66
liamjay66

Reputation: 110

You could change the display of the h1 on hover

.navigation:hover h1 {
    display: block;
}

Upvotes: 1

James
James

Reputation: 2033

http://jsfiddle.net/VBsDp/1/

Check out the fiddle.

You didn't have a hover class to show the h1. I added:

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

I have actually updated it again:

http://jsfiddle.net/VBsDp/3/

This time I added:

top: -35px;

for the h1 and put

positon: relative;

for the li

Upvotes: 5

Related Questions