Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

CSS change img on hover?

rockinlinux
in Frontend

Featured Replies

I am making a site and on my horizontal menu i want the text to add a drop shadow on hover. I made the images one is "home" and the other is the same plus a shadow. I have tried a few different things and have been googleing for a couple hours now and cant figure this out. Any help i would really like :)

 

thanks in advance :)

 

also i inlcued the images so you have an idea, the home.gif is the normal one and the home_sh.gif is the one i want on hover. I think i could do this with JS but i dont know much and it seems possible with css....i just dont know how :(

post-3236-1200662378_thumb.gif

post-3236-1200662387_thumb.gif

Simply add some code similar to this:

a { background: url(home.gif) top center no-repeat; }
a:hover { background: url(home_sh.gif) top center no-repeat; }

 

The first bit tells the browser what the non-hover state is (i.e.: first image). The second tells it what the hover state is (i.e.: second image).

  • Author
Simply add some code similar to this:

a { background: url(home.gif) top center no-repeat; }
a:hover { background: url(home_sh.gif) top center no-repeat; }

 

The first bit tells the browser what the non-hover state is (i.e.: first image). The second tells it what the hover state is (i.e.: second image).

 

 

this is what i was trying, here is my code: very simple.

 

xhtml:

 

<div id="nav">

<a href="index.html"></a>

 

</div><!--END NAV-->

 

CSS:

 

div#nav {

height: 35px;

text-align: center;

padding:2px;

border-bottom: 1px solid #0078ed;

}

 

div#nav img {

border: none;

}

 

div#nav a {

width: 88px;

height:10px;

background:url(images/home.gif) top center no-repeat;

}

 

div#nav a:hover {

background: url(images/home_sh.gif) top center no-repeat;

}

 

Right now no image shows up, i know i have the path right and everything so thats not why.

 

thanks :)

  • Author
this is what i was trying, here is my code: very simple.

 

xhtml:

 

<div id="nav">

<a href="index.html"></a>

 

</div><!--END NAV-->

 

CSS:

 

div#nav {

height: 35px;

text-align: center;

padding:2px;

border-bottom: 1px solid #0078ed;

}

 

div#nav img {

border: none;

}

 

div#nav a {

width: 88px;

height:10px;

background:url(images/home.gif) top center no-repeat;

}

 

div#nav a:hover {

background: url(images/home_sh.gif) top center no-repeat;

}

 

Right now no image shows up, i know i have the path right and everything so thats not why.

 

thanks :)

sorry the div#nav img was a left over. not there now.

  • Author
sorry the div#nav img was a left over. not there now.

 

 

Now i have the right effect. I added a blank .gif image to the html so it looks like:

 

<div id="nav">

<a href="index.html"><img src="images/foreground.gif" /> </a>

 

</div><!--END NAV-->

 

But now it is not lining up. The background image in the .css file is at the bottom of the foreground.gif. I cant even move it by using padding of margins...what can i do. The funny thing is that if this were any day but friday i bet i couple figure this out...i loose focus on Fridays like no other :)

 

here is my css now.

 

div#nav {

height: 35px;

text-align: center;

padding:2px;

border-bottom: 1px solid #0078ed;

}

 

div#nav a {

width: 88px;

background: url(images/home.gif) top center no-repeat;

 

}

 

div#nav a:hover {

background: url(images/home_sh.gif) top center no-repeat;

}

  • Author

I have some a little further but the image is half cut off now. i turn the borders on in the div#nav a {}. i also relize that the background image only show up when there is content in the html between the <a href="index.html">CONTENT HERE</a>. is there anyway around this?i want the image to be the link, i dont want text and i think it is the blank /gif that is throwing the whole thing off.

 

thanks for everything :)

the problem doing it the way that you are doing it is that when you hover over it it will flicker on first hover due to the over image needing to load. So here is a solution that I would use and I will show you with one of my images how to do it the most effective way....

 

combine your images into one, like this (it doesn't have to be horizontal like mine are you can do it vertical)

 

nav_purple_home.gif

 

 

then you would do something like this in the css:

 

.home {
display: block;
width:34px;
height:36px;
background-image: url(images/home.gif);
background-repeat: no-repeat;
overflow:hidden;
}

a.home{
background-position: 0px 0;
}
a.home:hover{
background-position: -34px 0;
}

 

 

 

then the link would be like this in html

 

<a href="/" class="home"></a>

 

 

 

then if you have other links such as about you would do the same but call the class something different :)

 

 

 

 

EDIT: just in case you are wondering, the reason why I have 3 images is because I have a norma, hover and on states for my site :)

  • Author
the problem doing it the way that you are doing it is that when you hover over it it will flicker on first hover due to the over image needing to load. So here is a solution that I would use and I will show you with one of my images how to do it the most effective way....

 

combine your images into one, like this (it doesn't have to be horizontal like mine are you can do it vertical)

 

then you would do something like this in the css:

 

.home {
display: block;
width:34px;
height:36px;
background-image: url(images/home.gif);
background-repeat: no-repeat;
overflow:hidden;
}

a.home{
background-position: 0px 0;
}
a.home:hover{
background-position: -34px 0;
}

then the link would be like this in html

 

<a href="/" class="home"></a>

then if you have other links such as about you would do the same but call the class something different :)

EDIT: just in case you are wondering, the reason why I have 3 images is because I have a norma, hover and on states for my site :)

 

 

wow. i dont even know what to say. I not only got an answer but i got something better that i hoped. thanks :) now i will try it. :)

Ooh thanks for reminding me of that Dizi, I just noticed the tabs on my current project had the flickering problem.

 

All fixed now B)

flickering problem.

 

Yeah the "slot machine" method is by far the best method IMHO. It involves 10 minutes extra graphic work, but worth it.

  • Author
Yeah the "slot machine" method is by far the best method IMHO. It involves 10 minutes extra graphic work, but worth it.

 

 

yeah it worked great. The olny question i have now i show do i get them to align horizontally in the middle of the page. text-align: center in the #nav div does not work. How do i do this? :)

 

thanks everyone :)

if you are containing them in a #nav then set the width of this and then add this line in the css:

margin: 0 auto;

 

 

What this does is tells the left and right margins to equally share the space left over causing the #nav to be centered...for more information about good ways to center a site look at this thread

  • Author
if you are containing them in a #nav then set the width of this and then add this line in the css:

margin: 0 auto;

What this does is tells the left and right margins to equally share the space left over causing the #nav to be centered...for more information about good ways to center a site look at this thread

 

 

hmmm...that did not work. here is my css:

 

div#nav {

width: 776px;

height: 35px;

border-bottom: 1px solid #0078ed;

margin: 0 auto;

}

 

.webdesign {

display: block;

width: 120px;

height: 40px;

background: url(images/design.gif) no-repeat;

float:right;

}

 

a.webdesign {

background-position: 0px 0px;

}

 

a.webdesign:hover {

background-position: -120px 0px;

}

 

.graphics {

display: block;

width: 95px;

height: 40px;

background: url(images/graphics.gif) no-repeat;

float:right;

}

 

a.graphics {

background-position: 0px 0px;

}

 

a.graphics:hover {

background-position: -95px 0px;

}

 

.about {

display: block;

width:76px;

height: 40px;

background: url(images/about.gif) no-repeat;

float:right;

}

 

a.about {

background-position: 0px 0px;

}

 

a.about:hover {

background-position: -76px 0px;

}

 

.home {

display: block;

width: 66px;

height: 33px;

background:url(images/home.gif) no-repeat;

float:right;

 

}

 

a.home {

background-position: 0px 0px;

}

 

a.home:hover {

background-position: -66px 0px;

}

 

and html:

<div id="nav">

 

 

<a href="webdesign.html" class="webdesign"></a>

<a href="graphicsdesign.html" class="graphics"></a>

<a href="about.html" class="about"></a>

<a href="index.html" class="home"></a>

</div><!--END NAV-->

 

 

I have not read the link but im going to right now....btw thanks for all the help!

  • Author
You could try adapting this tutorial i made:

 

http://www.webdesignerforum.co.uk/index.php?showtopic=270

 

It uses 1 image for all rollover and active states.

 

Might be worth trying?

 

 

i guess thats pretty much what i did, almost. Thanks. I still cant figure out why the margin:auto wont work to center the links. anyone?

 

thanks in advance :)

i guess thats pretty much what i did, almost. Thanks. I still cant figure out why the margin:auto wont work to center the links. anyone?

 

thanks in advance :)

 

Hey,

 

What would help me very much is showing me an example of a live link to your nav/page so i can determine what's wrong alot faster, would you mind doing that? (This is when I can use Firebug - my trusty Firefox App!)

 

Regards

 

Ben :)

its because you have set your #nav div to a width of 776px and the links don't equal 776px. So you have floated them to the right of the 776px space, your nav does center but your links don't because of this...

 

 

The best thing to do is to have your links in an unordered list...there are reasons why you should always do this with navigation and if you do a google search you will find some articles about its.

 

 

The example below is the best way for you to do the list with the links that you have given...

 

 

Add this to your css:

 

 

#nav ul {

display:block;

width:360px; /*this isn't the exact width but its close */

margin: 0 auto;

padding:0}

 

#nav li {

list-style-type: none;

margin:0;

padding:0;

}

 

 

 

Basically the unordered list will be acting as a wrapper for the links, the width has to be near to the the total of all used space that your links take up so this is basically adding up the widths the margins and the padding of all the links and making this the width of the ul. This will make it central within your 776px space, anything bigger than the total and it will not be centered as it will center the width of the container not what is within the container...

 

 

then change your HTML to this:

 

<div id="nav">

<ul>

<li><a href="webdesign.html" class="webdesign"></a></li>

<li><a href="graphicsdesign.html" class="graphics"></a></li>

<li><a href="about.html" class="about"></a></li>

<li><a href="index.html" class="home"></a></li></ul>

</div>

 

 

 

 

That will center your links on the page.

  • Author

so the good news: i have everything centered and it looks ok and once i fiure this out....i dont think i will ever need to ask questions about this again:)

 

the not so good news: How do i add right or left padding to the li ? it does not seem to work how i want it. What i really need is to add pading to the individual classes but when i do you start to see the hover state picture. I just need more space between the links :)

 

thanks and sorry, i feel kinda dumb asking all this stuff...i thought i knew it pretty well but i guess not :(:)

are you just wanting to add some space between the buttons? if soinstead of using padding use a margin.Padding adds to the inside of a div/block/li....ect where as a margin adds to the outside of it. So if you add padding then your space will become bigger and as such so will your hidden part of the image shows through.

  • Author

ok well i got it looking really good in firefox but it is crap in IE6 (have not tried any other version). the links are not on the same line, they are stepping from left to right like this:

 

4

3

2

1

 

thats what they look like. if i make the nav#ul 50px wide they are like this:

4

3

2

1

 

and not centered in FF or IE. I dont know why this seems to be so hard, I have done it before (horizontal menus) but this one is hard. any ideas?

 

thanks :)

  • Author
ok well i got it looking really good in firefox but it is crap in IE6 (have not tried any other version). the links are not on the same line, they are stepping from left to right like this:

 

4

3

2

1

 

thats what they look like. if i make the nav#ul 50px wide they are like this:

4

3

2

1

 

and not centered in FF or IE. I dont know why this seems to be so hard, I have done it before (horizontal menus) but this one is hard. any ideas?

 

thanks :)

 

 

ok well that did not turn out right but i figured it out :)

  • 9 months later...
the problem doing it the way that you are doing it is that when you hover over it it will flicker on first hover due to the over image needing to load. So here is a solution that I would use and I will show you with one of my images how to do it the most effective way....

 

combine your images into one, like this (it doesn't have to be horizontal like mine are you can do it vertical)

 

nav_purple_home.gif

 

 

then you would do something like this in the css:

 

.home {
display: block;
width:34px;
height:36px;
background-image: url(images/home.gif);
background-repeat: no-repeat;
overflow:hidden;
}

a.home{
background-position: 0px 0;
}
a.home:hover{
background-position: -34px 0;
}

 

 

 

then the link would be like this in html

 

<a href="/" class="home"></a>

 

 

 

then if you have other links such as about you would do the same but call the class something different :)

 

 

 

 

EDIT: just in case you are wondering, the reason why I have 3 images is because I have a norma, hover and on states for my site :)

Thanks Dizi I had no idea this technique was so simple! :lol:

How do you keep say 5 tabs together do you use a list or what?

yup its amazing what css can do really simply, I hope that you will start learning it more in depth rather than thinking you are really 4 and a half stars out of 5 at it already.

 

 

but yes use a list and if you want them next to each other use the floats to do that. (see up a couple of posts to see an example of how the list would look)

  • 2 months later...

thanks all for the feedback lol, more than i could expect :)

  • 5 years later...
  • 4 weeks later...

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.