...

View Full Version : Firefox - Image Transitions



goodoldarsenal
11-22-2010, 07:39 PM
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:


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


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

goodoldarsenal
11-22-2010, 09:09 PM
No worry I am going to use jQuery instead, as I've just found out that Firefox doesn't support the webkit.

EMaks
11-23-2010, 12:59 PM
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 )



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum