Rollover effect with logo - Musicstate

Hey yall... I am using Musicstate and its great... I just wanted to know if I could CREATE a rollover effect with my logo, so when I bring the mouse over it, it displays a similar yet different logo image, giving the impression of an animation... and perhaps the effect can be a slow one, a shift from one image to the other, but slow and clean? If this is possible, let me know!

Thanks,

-Charles

Hi

Yes I have an idea in mind. Please tell me the url to Your site and the url to the image You want to replace the logo with.

The url is www.oroborosyoga.com and the image is here...

The logo that is there now is the same but without the cosmic coloring in the center, so it will make for a night shift... and if there could be a fade perhaps to allow the effect to be smooth... if you could help me with that, I would be most appreciative!

ACTUALLY THE IMAGE IS HERE... sorry...

http://oroborosyoga.com/images/LogoFinalRoll.jpg

Hi

Add this to override.css and make sure override is enabled in template settings:

Code: Select all

#gkHeaderNav #gkLogo {
    background: url("http://oroborosyoga.com/images/LogoFinalRoll.jpg") no-repeat scroll center bottom transparent;
    position: absolute;
    width: 137px;
}

#gkHeaderNav #gkLogo img {
    opacity: 1;
    transition: all 0.4s ease-out 0s;
    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    -ms-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
}

#gkHeaderNav #gkLogo img {
    opacity: 0;
}


I am sorry, but this did not work... I added that code to my Override.css and I have overrides enabled...

Hi

Please take a look at the override.css file http://www.oroborosyoga.com/templates/g ... erride.css there is nothing there. Please make sure code is there and clear cache it's it's the cause of this file not being refreshed.

So, I did do what you said, but I removed it because it simply replaced my logo image instead of creating a rollover effect :/

If you could help me further, I would appreciate it!

Thanks again
Charles

Hi

Sorry, one small mistake. There should be one small adjustment to the last class:

Code: Select all

#gkHeaderNav #gkLogo:hover img {
    opacity: 0;
}