Rollover effect with logo - Musicstate

Responsive Joomla template for Entertainment and Music purpose with clean and lightweight design.
GK User
Thu Mar 26, 2015 4:43 pm
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
User avatar
Fresh Boarder

teitbite
Fri Mar 27, 2015 9:31 am
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.
User avatar
Moderator

GK User
Sat Mar 28, 2015 2:51 am
The url is www.oroborosyoga.com and the image is here... Image

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!
User avatar
Fresh Boarder

GK User
Sat Mar 28, 2015 3:15 am
ACTUALLY THE IMAGE IS HERE... sorry...

http://oroborosyoga.com/images/LogoFinalRoll.jpg
User avatar
Fresh Boarder

teitbite
Mon Mar 30, 2015 12:23 pm
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;
}
User avatar
Moderator

GK User
Wed Apr 01, 2015 11:36 pm
I am sorry, but this did not work... I added that code to my Override.css and I have overrides enabled...
User avatar
Fresh Boarder

teitbite
Sun Apr 05, 2015 9:35 am
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.
User avatar
Moderator

GK User
Tue May 05, 2015 5:46 pm
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
User avatar
Fresh Boarder

teitbite
Sun May 10, 2015 10:20 am
Hi

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

Code: Select all
#gkHeaderNav #gkLogo:hover img {
    opacity: 0;
}
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.