Stand Alone Icons Hover Effects Problem - Support | Kriesi.at

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

Author

Posts

July 17, 2014 at 10:43 pm #292680

On the large stand alone icons, how do you change the color of the hover effect that circles around it? So, when I hover my mouse over the icon there is a white circle that animates, I would like that to be blue.

Here is an example page: http://dev.questcommunity.com/pastorpete/

The icons are being used at the bottom.

Thanks!

Nate

July 18, 2014 at 3:15 am #292777

Devin

Inactive Moderator

Hey ThomasWalkerDesign!

Unfortunately that isn’t an effect that is easily changed. You would need to change all of the color values used in this keyframe css3 code to the colors you want to then create the color “sonar”:


/*sonar effect*/
@-webkit-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,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(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,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(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);transform: scale(1.5);opacity: 0;}
}

Regards,
Devin

July 19, 2014 at 11:02 pm #293478

ThomasWalkerDesign

Participant

That worked great! Thanks for the help. I just added that to the child theme CSS.

Nate

July 20, 2014 at 1:48 am #293494

Devin

Inactive Moderator

Glad we could help. Let us know if you have any other questions or issues.