Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Colin Lewis
Colin Lewis
9,021 Points

hover transition not working right in firefox only

the transition on the menu bar looks right on chrome, but on firefox it is not transitioning like it should, only fade out, no fade in, any ideas?

http://www.stellacadenteentertainment.com/hollyelle/

Hayden Taylor
Hayden Taylor
5,076 Points

I can't speak as to what this error is on firefox but could you post the code mainly the transition part on menu items and the menu-items:hover code as well.

Also: I viewed your website and I HIGHLY suggest your use a different font. Or only use the fancy font for heading and boost the font-size.

Colin Lewis
Colin Lewis
9,021 Points

which font are you referring to? the menu and headings are the same font, the rest of the site is a different one.

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Colin,

You're talking about the hearts I hope?

It looks like you're trying to animate both the background-image and the background-position. background-image isn't an officially supported animatable property although it looks like chrome went ahead and did it anyway if I'm seeing this right.

I suggest you look to animating background-size instead.

I was able to get the hearts working in firefox with the following css:

.menu-item {
    background-image: url("img/heart.png");
    background-position: center center;
    background-repeat: no-repeat;
    transition: all 0.5s ease-out 0s;
    background-size: 27px;
}
.menu-item:hover {
    background-size: 107px;
}

The normal resting state now has the large image but it is scaled down to the size of the small image. Then on hover it is scaled up to its native width of 107px. I didn't think it was necessary to transition the position but you can put back in if you think it's necessary.

I didn't test if this also works in chrome but you can post back here if it doesn't.