CSS ease hover effect trouble

HTML & CSS
1

Hi All,

This ease transitioning stuff is all a bit new to me so apologies if its obvious!

I have a menu and each <li> has its own class as the background image for each is different.
What i’m trying to do is get the background image on the hover to fade in over the top of the original. I dont want the original to start off with a lower opacity etc, and i just want it to apply to the background-image, nothing else. Can this be done?? Ive tried a number of different things but nothing seems to be working…

/* -------------------sub nav-------------------- */


#sub_nav {
width:1000px;
height:250px;
display:inline;
}


#sub_nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#sub_nav li {
	float: left;
	margin: 0px;
}

#sub_nav li a {
	font-family:'TrumpGothicEastRegular', Helvetica, sans-serif;
	font-size:24px;
	text-align:center;
	height: 30px;
	width: 250px;
	display: block;
	color: #000000;
	text-decoration: none;
	padding-top:220px;
	margin-top:-4px;
}



#sub_nav li.ff a {
	background-image:url(images/FF1.png);
}

#sub_nav li.bc a {
	background-image:url(images/BC1.png);
}

#sub_nav li.el a {
	background-image:url(images/EL1.png);
}

#sub_nav li.tv a {
	background-image:url(images/TV1.png);
}

#sub_nav li.ff a:hover {
	background-image:url(images/FF2.png);
}

#sub_nav li.bc a:hover {
	background-image:url(images/BC2.png);
}

#sub_nav li.el a:hover {
	background-image:url(images/EL2.png);
}

#sub_nav li.tv a:hover {
	background-image:url(images/TV2.png);
}

Any advice would be much appreciated - thanks in advance!

2

At what point to you want the fade to happen? On hover, or when the page loads?

3

Just on the hover…

Thanks!

4

You’ll need Javascript for this to happen

[URL=“http://api.jquery.com/fadeIn/”]http://api.jquery.com/fadeIn/

Check ou that API. You can also find premade scripts via a simple google search.

5

Or you could use CSS3 for browsers that support it.

#sub_nav li {
-webkit-transition: background linear .3s; 
-moz-transition: background linear .3s; 
-o-transition: background linear .3s; 
-ms-transition: background linear .3s;
 transition: background linear .3s;
}
6

ralph.m,
I tried that but unfortunately it didnt work… Ive got the css ease working really well on other navigation menus that change background-colour, but for some reason it wont work for a background-image.
I’ll have a crack at RyanReese’s jquery suggestion…

ta

7

Let us know if you have any issues with it :). Glad I could be of help.

You’ll find Jquery is very useful to know. I’d go through that API and see if anything else could be of use to you.

8

Hi,
Yes, it will work with BG images.

You need to place the transition rules on the <a>, not the <li>. Then place whatever is to change on your a:hover rules.

What i’m trying to do is get the background image on the hover to fade in over the top of the original.

The problem I see is that you are loading a new image on hover, that will give some delay and conflict with the transition timing. You will be much better off merging the two states together into one sprite image and then just changing BG positions on hover. That should give you the effect your after without any loading delays.

Here is an old demo I put together a while back when I was testing with transitions.
http://www.css-lab.com/demos/nav/css3/rollout-anchor.html

View the page source and you will see the transition rules on the anchor, then a BG color gets added along with an increase in width on hover.

9

Argh! that was my fault. Thanks Ray. And yes, I should also have suggested combining the images into a sprite.