Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 31, 2015 at 8:42 pm #388837
    jolamalice

    Hi,

    My objective is to obtain an icon hover animation with an icon configured like that (NO link, NO Tooltip).:

    Icon Style : Standalone Icon…
    Icon Caption: Icon1
    Title Link: No Link
    Align Center
    Optional tooltip:

    I tried to add css code within the custom.css :

    /* General Custom CSS */
.av_font_icon.av-icon-style-border .av-icon-char:hover:after {
        -webkit-animation:      sonarEffect 1s ease-out ;
        -moz-animation:         sonarEffect 1s ease-out ;
        animation:              sonarEffect 1s ease-out ;
}

    Nevertheless, for some reason I do not see any hover animation on my icon.

    Do you have any suggestions regarding my requirement ?

    Best Regards

    January 31, 2015 at 11:46 pm #388884
    Josue

    Hi!

    Can you poste the code of the sonarEffect animation?

    Cheers!
    Josue

    February 1, 2015 at 11:30 am #388993
    jolamalice

    Hi!

    Sonar effect works fine !!!! Thank you so much

    For some who don’t even know what is sonar effect, I had this code within wordpress backend at Enfold->General Styling:

    .av_font_icon span:hover:after {
-webkit-animation: sonarEffect 1s ease-out;
-moz-animation: sonarEffect 1s ease-out;
animation: sonarEffect 1s ease-out;
}

    My latest question is how to change the color of this awesome effect like this website :

    http://goo.gl/AWZDuz

    Actually the sonar effect is white, I would like that it have the same color as icon circle.

    Cheers

    February 1, 2015 at 7:18 pm #389053
    jolamalice

    I got it, I found a thread in your support :

    /*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;}
}

    I changed every rgba(255,255,255,opacity) element, by the color code, I was looking for.

    Thanks again

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Hover animation on Icon without link or tooltip’ is closed to new replies.