Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 24, 2015 at 1:00 pm #541537
    tjswarbs78

    Morning Enfold forum :)

    The icons with optional hover effect produces a white flash when used as a link. Which css class is responsible for the color of the hover effect?

    I have a blue icon, a green icon and a red icon and would like the hover flash to be the same colour as the icon.

    I’ve tried combinations of .av-icon-char and av_font_icon with :a hover .span etc but can’t figure it out.

    Thanks in advance

    November 24, 2015 at 1:03 pm #541542
    Yigit

    Hey tjswarbs78!

    Can you please post the link to your website and a screenshot showing the changes you would like to make? :)

    Cheers!
    Yigit

    November 24, 2015 at 1:13 pm #541553
    tjswarbs78

    link is private below. If you hover over the icon the tooltip explains what I’d like :)

    November 24, 2015 at 1:22 pm #541563
    Yigit

    Hey!

    I see but unfortunately that would require a heavy CSS customization to show a different color on each icon and would be out of the scope of our support. If you would like to give it a try, please see – https://kriesi.at/support/topic/hover-for-icons-with-links/#post-520804 and http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/.

    Regards,
    Yigit

    November 24, 2015 at 1:28 pm #541572
    tjswarbs78

    You’ve pointed me in the right direction I shall give it a go :)

    Many thanks

    EDIT

    posting mainly due to the fact that with your direction I figured it out. May come in useful for others…

    Rather than the white sonar effect using the code below as an example you can set it to any color on any icon.
    First give the icon a customer css class ( in this case blue-icon and green-icon)
    Then the following css will color the sonar effect accordingly

    /*sonar effect blue*/
.blue-icon a:hover:after {
-webkit-animation: sonarblue 1s ease-out!important;
-moz-animation: sonarblue 1s ease-out!important;
animation: sonarblue 1s ease-out!important;
}

@-webkit-keyframes sonarblue {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(0,57,118,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,57,118,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(0,57,118,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,57,118,0.5);-webkit-transform: scale(1.5);opacity: 0;}
}
@-moz-keyframes sonarblue {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(0,57,118,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,57,118,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(0,57,118,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,57,118,0.5);-moz-transform: scale(1.5);opacity: 0;}
}
@keyframes sonarblue {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(0,57,118,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,57,118,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(0,57,118,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,57,118,0.5);transform: scale(1.5);opacity: 0;}
}

/*sonar effect green*/
.green-icon a:hover:after {
-webkit-animation: sonargreen 1s ease-out!important;
-moz-animation: sonargreen 1s ease-out!important;
animation: sonargreen 1s ease-out!important;
}

@-webkit-keyframes sonargreen {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(0,170,103,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,170,103,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(0,170,103,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,170,103,0.5);-webkit-transform: scale(1.5);opacity: 0;}
}
@-moz-keyframes sonargreen {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(0,170,103,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,170,103,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(0,170,103,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,170,103,0.5);-moz-transform: scale(1.5);opacity: 0;}
}
@keyframes sonargreen {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(0,170,103,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,170,103,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(0,170,103,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0,170,103,0.5);transform: scale(1.5);opacity: 0;}
}
    • This reply was modified 9 years ago by tjswarbs78.
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Icon hover effect’ is closed to new replies.