Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2010
    Location
    England
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firefox - Image Transitions

    Hi all.

    So I have a menu bar I've created from 2 images, and on :hover the image fades out / opacity: 0 to show the other image. This transition works in Safari, as I'm using the -webkit-transition CSS function, but how would I call Firefox to do the same?

    HTML:

    Code:
    <DIV class="menubar">
    				<SPAN class="btn-home-fade">
    					<A href="index2.html"><IMG src="images/main_content/navbar/home-b.png" class="fadeend" alt="Home"></A>
    					<A href="index2.html"><IMG src="images/main_content/navbar/home-a.png" class="fadestart" alt="Home"></A>
    				</SPAN>
    				<SPAN class="btn-portfolio-fade">
    					<A href="portfolio.html"><IMG src="images/main_content/navbar/portfolio-b.png" class="fadeend" alt="Portfolio"></A>
    					<A href="portfolio.html"><IMG src="images/main_content/navbar/portfolio-a.png" class="fadestart" alt="Portfolio"></A>
    				</SPAN>
    				<SPAN class="btn-cv-fade">
    					<A href="cv.html"><IMG src="images/main_content/navbar/cv-b.png" class="fadeend" alt="Curriculum Vitae"></A>
    					<A href="cv.html"><IMG src="images/main_content/navbar/cv-a.png" class="fadestart" alt="Curriculum Vitae"></A>
    				</SPAN>
    				<SPAN class="btn-contact-fade">
    					<A href="contact.html"><IMG src="images/main_content/navbar/contact-b.png" class="fadeend" alt="Contact"></A>
    					<A href="contact.html"><IMG src="images/main_content/navbar/contact-a.png" class="fadestart" alt="Contact"></A>
    				</SPAN>
    			</DIV>
    CSS:

    Code:
    /* HOME BUTTON ACTIVE PAGE
    FADING
    ---------------------*/
    .btn-home-active-fade {
    	position: relative;
    	text-align: center;
    }
    
    /* PORTFOLIO BUTTON ACTIVE PAGE
    FADING
    -------------------------*/
    .btn-portfolio-active-fade {
    	position: relative;
    	text-align: center;
    }
    
    /* ENTER BUTTON FADING
    ---------------------*/
    .btn-enter-fade {
    	position: relative;
    }
    
    /* HOME BUTTON ACTIVE PAGE
    FADING
    ---------------------*/
    .btn-home-active-fade {
    	position: relative;
    }
    
    /* HOME BUTTON FADING
    ---------------------*/
    .btn-home-fade {
    	position: relative;
    }
    
    /* PORTFOLIO BUTTON FADING
    ---------------------*/
    .btn-portfolio-fade {
    	position: relative;
    }
    
    /* CV BUTTON FADING
    ---------------------*/
    .btn-cv-fade {
    	position: relative;
    }
    
    /* CONTACT BUTTON FADING
    ---------------------*/
    .btn-contact-fade {
    	position: relative;
    }
    
    .fadestart {
    	position: absolute;
    	left: 0;
    	opacity: 1;
    	-webkit-transition: opacity 0.5s linear;
    	
    }
    
    img.fadestart:hover {
    	opacity: 0;
    	cursor: pointer;
    }
    My website (unfinished) can be found at:

    http://goodoldarsenal.byethost3.com

    Any help asap would be great.

  • #2
    New Coder
    Join Date
    Oct 2010
    Location
    England
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No worry I am going to use jQuery instead, as I've just found out that Firefox doesn't support the webkit.

  • #3
    New Coder
    Join Date
    Nov 2010
    Location
    Austin Texas
    Posts
    12
    Thanks
    0
    Thanked 3 Times in 3 Posts
    for firefox you could just use -moz-. and for opera -o- . but you'll have to duplicate all this code for each browser, so your solution is probably better )


  •  

    Tags for this Thread

    Posting Permissions

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