Hover Over Icons - Support | Kriesi.at - Premium WordPress Themes

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

May 15, 2014 at 9:28 am #265192

If you take a look at the page below, you will see the hover over icons. Is there a way to change the color of the white animation ring that shoots out around the icon when you hover your mouse over it? Or can it only be the white color?

http://techwizdesign.com/cap/homecap/

screenshot of white ring – http://postimg.org/image/j2rm6iibd/full/

May 15, 2014 at 12:17 pm #265234

Flikk

Participant

Change the #FFFFFF to the color you want. (all 4)
You also can add more keyframes like 20%{ }, 60% { } and so on. You can also make the color change over the time of the effect.
http://kriesi.at/documentation/enfold/custom-css-and-quick-css/

@-moz-keyframes sonarEffect {
0% {
    opacity: 0.3;
}
40% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #FFFFFF, 0 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0.5;
}
100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #FFFFFF, 0 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0;
    transform: scale(1.5);
}
}
@keyframes sonarEffect {
0% {
    opacity: 0.3;
}
40% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #FFFFFF, 0 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0.5;
}
100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #FFFFFF, 0 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0;
    transform: scale(1.5);
}
}

May 15, 2014 at 6:33 pm #265421

mand4mac3

Participant

Hmm, okay so this is what I tried out. Swapped out the white #ffffff with the #575149 and the colored ring is still white. Do you think maybe the RGBA colors need to be changed too?

@-moz-keyframes sonarEffect {
0% {
    opacity: 0.3;
}
40% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0.5;
}
100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0;
    transform: scale(1.5);
}
}
@keyframes sonarEffect {
0% {
    opacity: 0.3;
}
40% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0.5;
}
100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0;
    transform: scale(1.5);
}
}

May 16, 2014 at 4:24 am #265686

Ismael

Moderator

Hey!

Thank you for using the theme!

You also need to change the initial box-shadow property where the keyframes will base their animation:

.av_font_icon.av-icon-style-border .av-icon-char:after {
	box-shadow: 0 0 0 2px rgba(87,81,73,0.1) !important;
}

@-webkit-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);-webkit-transform: scale(1.5);opacity: 0;}
}
@-moz-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);-moz-transform: scale(1.5);opacity: 0;}
}
@keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);transform: scale(1.5);opacity: 0;}
}

Cheers!
Ismael

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.