SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS ease hover effect trouble

    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..

    Code CSS:
    /* -------------------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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    At what point to you want the fade to happen? On hover, or when the page loads?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just on the hover..

    Thanks!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You'll need Javascript for this to happen

    http://api.jquery.com/fadeIn/

    C
    heck ou that API. You can also find premade scripts via a simple google search.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Or you could use CSS3 for browsers that support it.

    Code:
    #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. #6
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by maree_DW View Post
    ... 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.
    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/css...ut-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. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Rayzur View Post
    You need to place the transition rules on the <a>, not the <li>.
    Argh! that was my fault. Thanks Ray. And yes, I should also have suggested combining the images into a sprite.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •