-
Posts
-
Hi!
Is it possible to get the same “sonar effect” (found on the icon element during the hover state) for all the buttons on the site? This pulsing hover effect can be found when selecting the “stand alone icon with border and optional caption” under the icon options.
Thanks in advance for your help!Hey webdesign,
Please have a look at the solution posted here
https://kriesi.at/support/topic/animated-font-icons-how-to-make-such-sonareffect/#post-251840Best regards,
VictoriaHi,
I found your code for the icon, and tried to modify it so it would work for all the buttons. Below is your original code, and under that is my modified code saved in my child theme. It did not have any change on the button hover. Can you please advice what is incorrect with my code? Thanks!/* Animated Icons */
.av_font_icon span:hover:after {
-webkit-animation: sonarEffect 1s ease-out;
-moz-animation: sonarEffect 1s ease-out;
animation: sonarEffect 1s ease-out;
}.avia-button span:hover:after {
-webkit-animation: sonarEffect 1s ease-out;
-moz-animation: sonarEffect 1s ease-out;
animation: sonarEffect 1s ease-out;
}Hi webdesign,
Please share the link to the page where we can see what you’ve got so far?
Best regards,
VictoriaHi estleman,
Yes, it’s possible. Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaI’ve shared the link in the private content field. At the top of the page, you’ll see a PLAY Button and if you mouseover that the sonar effect shows once. I’d like to see that continue animating every so often so it stands out a bit more.
Thanks in advance!Hi estleman,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.bgIconDark a { -webkit-animation: sonarEffect 3s ease-out infinite; -moz-animation: sonarEffect 3s ease-out infinite; animation: sonarEffect 3s ease-out infinite; }If you need further assistance please let us know.
Best regards,
Victoriahi there,
i think i´m working on the same issue. somehow changes not visible for me.
on the link you will find on the right side a standalone icon with subtitle.
i would like to use the sonar effect without mouse on hover, as a continues loop, that the visitor better recognize the “icon-nacigation”.
maybe you can help out?
thanks in advance!
best regards
ferdleThis worked for me Ferdle. You have to make sure you are targeting your icon. The class the moderator gave me was specific to my coding. I added that class to this button only.
On another side note, I was hoping just the circle around the icon would animate, not the actual icon IN the circle. Any way to do this?
- You must be logged in to reply to this topic.