- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I’m trying to make a menubar with transitioning images and it works in Chrome but it’s not working in Firefox and IE (not tried any others). Am I missing something? I’m very new at this.
#home {
height: 200px;
width: 200px;
position: absolute;
left: 40px;
background-image: url(../img/home_1.png);
transition: background-image 500ms ease;
-moz-transition: background-image 500ms ease;
-webkit-transition: background-image 500ms ease;
}
#home:hover{
background-image: url(../img/home_2.png);
transition: background-image 500ms ease;
-moz-transition: background-image 500ms ease;
-webkit-transition: background-image 500ms ease;
}
I’m surprised it’s working at all…I didn’t think you could transition background-image
at all.
Chrome is obviously ahead of the game but as far as I know FF/Ie do not yet support it.
The swapping images are working so it’s not a very big deal. I wanted to use the transition to make it look more friendly but I understand that it won’t work the way I want in most browsers (bummer).
Can I use the transition on de (background) color instead and insert the white image on top? (It’s a square colored block with a white icon in the center).
There are other options but they involve pseudo elements.
If you build a demo in Codepen.io, we can show you.
I put in the full HTML and CSS (hope I do this right):
http://codepen.io/anon/pen/ADCah
Images are an example I “borrowed” from another site I have in development but the effect is the same.
I try to avoid Javascript for these effects. CSS seems like a much lighter and simpler solution. I used the standard option in Dreamweaver for rollover images before but it’s outdated and bulky.