Tagged: ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • February 21, 2014 at 10:52 pm #227727
    sassinack

    Hi Guys,
    Thanks so much for creating such an awesome theme!

    I’d like the icon border animation to inherit the color of the icons, rather than being white. I’ve read this post and tried this code:

    .av_font_icon.av-icon-style-border a.av-icon-char:hover:after { background-color: red; }

    However, it only changes the background color, not the animated border. I’ve also tried this 

    .av_font_icon.av-icon-style-border a.av-icon-char:hover:after { box-shadow: 0 0 0 2px #ff0000 !important; }

    but it didn’t work. Any hints?

    This is the site I’m updating.

    Thanks a ton!

    February 21, 2014 at 11:23 pm #227747
    sassinack

    Update:

    Ok, so I’ve gotten the sonar animation to change color by doing:

    @-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 #ff0000, 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 #ff0000, 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,0,255,0.1), 0 0 10px 10px #ff0000, 0 0 0 10px rgba(255,255,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,0,255,0.1), 0 0 10px 10px #ff0000, 0 0 0 10px rgba(255,0,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,0,255,0.1), 0 0 10px 10px #ff0000, 0 0 0 10px rgba(255,0,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,0,255,0.1), 0 0 10px 10px #ff0000, 0 0 0 10px rgba(255,0,255,0.5);transform: scale(1.5);opacity: 0;}
}

    Now, how do I make it inherit the color of the icons? (on my site I have them different colors)

    Thanks so much!

    February 22, 2014 at 12:24 am #227771
    sassinack

    Solved it…kinda

    If the box-shadow color is not specified in the sonar effect than it will inherit the color of it’s element. read about it here
    So, if I go into the shortcodes.css and delete all of the colors from @keyframes sonarEffect the sonar color will inherit the color of the icon!

    /*sonar effect*/
@-webkit-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;}
	100% {box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;-webkit-transform: scale(1.5);opacity: 0;}
}
@-moz-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;}
	100% {box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;-moz-transform: scale(1.5);opacity: 0;}
}
@keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;}
	100% {box-shadow: 0 0 0 2px , 0 0 10px 10px , 0 0 0 10px ;transform: scale(1.5);opacity: 0;}
}

    The problem is that I went into the parent theme folder to make this change. So, any updates will wipe it out.

    I read here that even if I copy ‘shortcodes.css’ into a child theme folder that the child theme may not use it, relying on the parent themes CSS instead.

    Any tips?

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Icon Animation on hover’ is closed to new replies.