Click here to Skip to main content
15,562,223 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more: (>> The site is not entirely responsive yet, so please watch it on a minimum 15'' screen, otherwise you wont see what I'm talking about)

When you hover the buttons (moon, planet, etc...) it changes the background. But the transition is buggy on Chrome (image1>blank>image2). It s working on IE11 but sometimes with a lag. I didn t try with the other browsers.

How to make a smooth transition with a quick fade?
Image1>image2, not image1>transition color>image2

Here is the code for the MOON button. Thats the same with the others.
(I don't know anything about Javascript. I found the script below on Stackoverflow.)


<div class="top-logos-home" id="top-logos-moon-front"><img src="moon-logo.png" alt="MOON"></div>


.image-home {
         position: absolute;
         width: 100%;
         height: 100%;
         background-image: url(Frontpage.jpg);
         background-size: cover;


        var $body = $('.image-home');
            $body.css('background-image', 'url("Frontpage-moon.jpg")')
        }, function() {
            $body.css('background-image', '')
Updated 15-Aug-15 4:43am
Sergey Alexandrovich Kryukov 15-Aug-15 11:39am    
I observe not what you described, even on Chrome. I tried Mozilla and Chrome. My observations suggest that you do have the solution but make some logical mistake. The smoothness of transition depends on what button you hover on, in what order. Look at the ring (second from right) and plus: they work smoothly if shown not the first time. Buttons on left are darker and go through your transition through a black screen. Mozilla show no less problem then Chrome. It could be just the play of download times and times of getting image from a browser cache. Maybe your problem is showing no background.
edou777 15-Aug-15 12:16pm    
Thanks for your reply. I tried again and its still doing defaultBG>blank>moonBG when hover in and moonBG>defaultBG (which is ok) when hover out. And the same with the other buttons whatever the order. I suppose I wont be the only one to have this problem. As you said it has probably something to do with the cache.

But anyway do you know how I can make a fade transition? How can I increase the transition time between the different backgrounds (hover in and out) from this Javascript code?
Maybe this will fix the bug.
Sergey Alexandrovich Kryukov 15-Aug-15 12:20pm    
I never tried, see jQuery effects. I would rather work at images, they don't look convincing. There is a sharp vertical line in the center, this is unacceptable. Perhaps you could use semi-transparent images superimposing, to never remove the shared background...
edou777 15-Aug-15 12:38pm    
Hehe I see in your profile you are architect like me!
Thanks for your advice but I actually like the background I did, even the "unacceptable" vertical line in the middle ;) which I think matches perfectly with the big logo.
Sergey Alexandrovich Kryukov 15-Aug-15 22:26pm    
No, I don't. If I had an exact suggestion, I would post a formal answer. It's obvious that a combination of semi-transparent images could be used, but I'm not sure it can solve the problem. The line is pretty bad, it hurts the eyes, believe me.

1 solution

I found a solution by using the opacity property. Now its working perfectly.


<img id="background-moon-front" class="hover-backgrounds" src="Frontpage-moon.jpg" />


.hover-backgrounds {
    transition: opacity 0.6s linear;
    background-size: 100%;


$(document).ready(function (e) {
    $("#top-logos-lune-front").hover(function (e) {
    $("#background-moon-front").css("opacity", "1");
    }, function() {
        $("#background-moon-front").css("opacity", "0")
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900