Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #388837

    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

    #388884

    Hi!

    Can you poste the code of the sonarEffect animation?

    Cheers!
    Josue

    #388993

    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

    #389053

    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

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

The topic ‘Hover animation on Icon without link or tooltip’ is closed to new replies.