Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 15, 2015 at 6:37 pm #519486
    mindator

    Hello,

    I would like to know how I can add an hover color for icons with a link.
    I don’t want a hover for all icons, just the ones with a link attached.

    I use the regular icon, not the icon box or the icon list. But a hover for icons with links in general would be great too…

    How can I do that? And do you see any chance to share the snippet for the hover effect from this page?
    http://kriesi.at/themes/enfold/homepage/home-v9-videos-and-parallax/

    Thanks in advance
    Bastian

    October 16, 2015 at 8:35 am #519708
    Ismael

    Hey mindator!

    Thank you for using Enfold.

    Edit the icon element then set the “Icon Style” to the second option. Add a link. It will automatically add the sonar hover effect.

    Regards,
    Ismael

    October 16, 2015 at 9:21 am #519725
    mindator

    Hi Ismael,

    thanks for your fast answer. I did what you mentioned but can’t see any effect. Maybe it’s because my background is white, so of course I can’t see the white sonar hover effect. Any idea where I can change the color from the sonar hover effect to something in blue?

    Thanks in advance
    Bastian

    October 19, 2015 at 10:49 am #520804
    Ismael

    Hi!

    Try to adjust the color value of the sonar keyframes. Add this code in the Quick CSS field:

    @-webkit-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,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(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,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(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);transform: scale(1.5);opacity: 0;}
}

.av_font_icon.av-icon-style-border .av-icon-char:after {
	box-shadow: 0 0 0 2px rgba(87,81,73,0.1) !important;
}

    Change all instances of the “rgba(87,81,73,0.1)” value.

    Cheers!
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.